<template>
  <div
    @click="clearCurComponent"
    id="canvas"
    ref="canvas"
    style="
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      background: #355d96;

      overflow: hidden;
    "
  >
    <el-dialog title="按钮组合管理" :visible.sync="addButtonGroupWin">
      <div style="width: 100%; display: flex; flex-direction: column">
        <div
          v-for="(item, index) in buttonGroupName"
          :key="index"
          style="
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <div>{{ item }}</div>
          <el-button type="danger">删除</el-button>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <input
            placeholder="请输入按钮组合名称"
            v-model="newButtonGroupName"
          />
          <el-button type="primary" @click="addButtonGroup"
            >创建按钮组合</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addButtonGroupWin = false">取 消</el-button>
        <el-button type="primary" @click="addButtonGroupWin = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="语音指令管理" :visible.sync="addAudioCommandDialog">
      <div
        style="width: 100%; display: flex; flex-direction: column; color: white"
      >
        <el-collapse v-model="activeNames" @change="handleChange" accordion>
          <el-collapse-item
            :title="audioItem.commandName"
            :name="andioIndex + 1"
            v-for="(audioItem, andioIndex) in audioList"
            :key="andioIndex"
            style="width: 100%; margin-bottom: 10px"
          >
            <div style="width: 100%; display: flex; flex-direction: column">
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                <div>指令名称：</div>
                <input
                  type="text"
                  style="border-bottom: solid black 1px; color: black"
                  v-model="audioItem.commandName"
                />
              </div>
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                <div>指令口令：</div>
                <input
                  type="text"
                  style="border-bottom: solid black 1px; color: black"
                  v-model="audioItem.commandAudio"
                />
              </div>
              <div
                v-for="(item, index) in audioItem.audioCommandList"
                :key="index"
                style="width: 100%; display: flex; flex-direction: column"
              >
                <div
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div style="width: 80px; text-align: left">指令类型</div>
                  <div style="display: flex; align-items: center; flex: 1">
                    <el-select
                      style="width: 100px"
                      @change="changeEventType(item)"
                      v-model="item.eventType"
                      placeholder="请选择指令类型"
                    >
                      <el-option
                        v-for="(item1, index1) in instructionArr"
                        :key="item1.type"
                        :label="item1.type"
                        :value="index1"
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      style="margin-left: 10px; width: 100px"
                      v-if="
                        item.sonInstructionArr != null &&
                        item.sonInstructionArr.length > 0
                      "
                      v-model="item.sonEventType"
                      placeholder="请选择类型"
                    >
                      <el-option
                        v-for="(item1, index1) in item.sonInstructionArr"
                        :key="item1"
                        :label="item1"
                        :value="index1"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div
                  v-if="
                    item.eventType == 1 ||
                    item.eventType == 2 ||
                    item.eventType == 0
                  "
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div>IP地址</div>
                  <div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item.ipAddress"
                    />
                  </div>
                  <div>端口号</div>
                  <div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item.port"
                    />
                  </div>
                </div>
                <div
                  v-if="item.eventType == 6"
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div style="width: 80px; text-align: left">串口编号</div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.serialNumber"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    波特率
                  </div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.baudRate"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    数据位
                  </div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.dataBits"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    停止位
                  </div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.stopBits"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    校验位
                  </div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      type="number"
                      v-model="item.parityBits"
                    />
                  </div>
                </div>
                <div
                  v-if="item.eventType == 3"
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div style="width: 80px; text-align: left">变量名称</div>
                  <div style="flex: 1">
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item.beChangedVariableName"
                    />
                  </div>
                  <div style="width: 70px; margin-left: 10px; text-align: left">
                    值
                  </div>
                  <div style="flex: 1">
                    <input
                      @input="countQuestionMarksForChangeVariableValue(item)"
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item.beChangedVariableValue"
                    />
                  </div>
                </div>
                <div
                  v-if="
                    item.eventType == 1 ||
                    item.eventType == 0 ||
                    item.eventType == 2 ||
                    item.eventType == 6
                  "
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <div>指令数据（用？表示需要填充的变量）</div>
                  <div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      @input="countQuestionMarksForInput(item)"
                      v-model="item.instructionData"
                    />
                  </div>
                </div>
                <div
                  v-if="
                    item.eventType == 1 ||
                    item.eventType == 0 ||
                    item.eventType == 2 ||
                    item.eventType == 3
                  "
                  style="width: 100%; display: flex; flex-direction: column"
                >
                  <div
                    style="display: flex; align-items: center; margin: 10px 0"
                    v-for="(item1, index1) in item.inputValueArr"
                    :key="index1"
                  >
                    <div>变量{{ index1 + 1 }}表达式</div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item1.valueName"
                    />
                  </div>
                </div>
                <div
                  v-if="
                    item.eventType == 1 ||
                    item.eventType == 0 ||
                    item.eventType == 2
                  "
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 10px 0;
                  "
                >
                  <el-checkbox v-model="item.getReturn" style="color: white"
                    >接收返回值</el-checkbox
                  >
                  <div>返回值提取格式（用?表示需要被提取的值）</div>
                  <input
                    style="border-bottom: solid black 1px; color: black"
                    @input="countQuestionMarks(item)"
                    v-model="item.returnFormat"
                  />
                </div>
                <div style="width: 100%; display: flex; flex-direction: column">
                  <div
                    style="display: flex; align-items: center; margin: 10px 0"
                    v-for="(item1, index1) in item.returnValueArr"
                    :key="index1"
                  >
                    <div>变量{{ index1 + 1 }}名称</div>
                    <input
                      style="border-bottom: solid black 1px; color: black"
                      v-model="item1.valueName"
                    />
                  </div>
                </div>
              </div>
            </div>
            <el-button @click="delAudioCommand(andioIndex)" type="danger"
              >删除语音</el-button
            >
          </el-collapse-item>
        </el-collapse>

        <div
          v-if="addNewAudioWinshow"
          style="
            width: 100%;
            display: flex;
            flex-direction: column;
            color: black;
          "
        >
          <div
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div>指令名称：</div>
            <input
              style="border-bottom: solid black 1px; color: black"
              type="text"
              v-model="addAudioCommandForm.commandName"
            />
          </div>
          <div
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div>指令口令：</div>
            <input
              style="border-bottom: solid black 1px; color: black"
              type="text"
              v-model="addAudioCommandForm.commandAudio"
            />
          </div>
          <div
            v-for="(item, index) in addAudioCommandForm.audioCommandList"
            :key="index"
            style="width: 100%; display: flex; flex-direction: column"
          >
            <div
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">指令类型</div>
              <div style="display: flex; align-items: center; flex: 1">
                <el-select
                  style="width: 100px"
                  @change="changeEventType(item)"
                  v-model="item.eventType"
                  placeholder="请选择指令类型"
                >
                  <el-option
                    v-for="(item1, index1) in instructionArr"
                    :key="item1.type"
                    :label="item1.type"
                    :value="index1"
                  >
                  </el-option>
                </el-select>
                <el-select
                  style="margin-left: 10px; width: 100px"
                  v-if="
                    item.sonInstructionArr != null &&
                    item.sonInstructionArr.length > 0
                  "
                  v-model="item.sonEventType"
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="(item1, index1) in item.sonInstructionArr"
                    :key="item1"
                    :label="item1"
                    :value="index1"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div
              v-if="
                item.eventType == 1 ||
                item.eventType == 2 ||
                item.eventType == 0
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div>IP地址</div>
              <div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item.ipAddress"
                />
              </div>
              <div>端口号</div>
              <div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item.port"
                />
              </div>
            </div>
            <div
              v-if="item.eventType == 6"
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">串口编号</div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.serialNumber"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                波特率
              </div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.baudRate"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                数据位
              </div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.dataBits"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                停止位
              </div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.stopBits"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                校验位
              </div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  type="number"
                  v-model="item.parityBits"
                />
              </div>
            </div>
            <div
              v-if="item.eventType == 3"
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div style="width: 80px; text-align: left">变量名称</div>
              <div style="flex: 1">
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item.beChangedVariableName"
                />
              </div>
              <div style="width: 70px; margin-left: 10px; text-align: left">
                值
              </div>
              <div style="flex: 1">
                <input
                  @input="countQuestionMarksForChangeVariableValue(item)"
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item.beChangedVariableValue"
                />
              </div>
            </div>
            <div
              v-if="
                item.eventType == 1 ||
                item.eventType == 0 ||
                item.eventType == 2 ||
                item.eventType == 6
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <div>指令数据（用？表示需要填充的变量）</div>
              <div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  @input="countQuestionMarksForInput(item)"
                  v-model="item.instructionData"
                />
              </div>
            </div>
            <div
              v-if="
                item.eventType == 1 ||
                item.eventType == 0 ||
                item.eventType == 2 ||
                item.eventType == 3
              "
              style="width: 100%; display: flex; flex-direction: column"
            >
              <div
                style="display: flex; align-items: center; margin: 10px 0"
                v-for="(item1, index1) in item.inputValueArr"
                :key="index1"
              >
                <div>变量{{ index1 + 1 }}表达式</div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item1.valueName"
                />
              </div>
            </div>
            <div
              v-if="
                item.eventType == 1 ||
                item.eventType == 0 ||
                item.eventType == 2
              "
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin: 10px 0;
              "
            >
              <el-checkbox v-model="item.getReturn" style="color: white"
                >接收返回值</el-checkbox
              >
              <div>返回值提取格式（用?表示需要被提取的值）</div>
              <input
                style="border-bottom: solid black 1px; color: black"
                @input="countQuestionMarks(item)"
                v-model="item.returnFormat"
              />
            </div>
            <div style="width: 100%; display: flex; flex-direction: column">
              <div
                style="display: flex; align-items: center; margin: 10px 0"
                v-for="(item1, index1) in item.returnValueArr"
                :key="index1"
              >
                <div>变量{{ index1 + 1 }}名称</div>
                <input
                  style="border-bottom: solid black 1px; color: black"
                  v-model="item1.valueName"
                />
              </div>
            </div>
          </div>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <el-button @click="addCommandInAudioCommand">添加指令</el-button>
          </div>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <el-button
            v-if="!addNewAudioWinshow"
            @click="addAudioCommand"
            type="primary"
            style="margin: 10px 0"
            >新增语音</el-button
          >
          <el-button
            v-if="addNewAudioWinshow"
            @click="saveNewAudio"
            type="primary"
            style="margin: 10px 0"
            >保存语音</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAudioCommandDialog = false">取 消</el-button>
        <el-button type="primary" @click="addAudioCommandDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <vdr
      v-show="editMode == 1"
      :onResize="onPageResizeCallback"
      :draggable="true"
      :w="pageShapeInfo.pageShapeWidth"
      :h="pageShapeInfo.pageShapeHeight"
      :x="pageShapeInfo.pageShapeLeft"
      :y="pageShapeInfo.pageShapeTop"
      :z="1"
      :min-width="50"
      :min-height="50"
    >
      <div
        v-if="showPreView == 0"
        @click="selectPage"
        id="pageBox"
        style="width: 100%; height: 100%"
        :style="{
          backgroundColor: pageShapeInfo.pageBackgroundColor,
        }"
      >
        <div
          v-if="pageBackgroundImage != null"
          style="
            position: absolute;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            pointer-events: none;
          "
          :style="{
            backgroundImage:
              'url(' +
              'http://' +
              resourceIp +
              ':8094/' +
              pageBackgroundImage +
              ')',
          }"
        ></div>

        <vdr
          :active="selectComponentId == item.type + index"
          :parent="false"
          :onDragStart="onDragStartWrapper(item, index)"
          :onDrag="onDragCallback"
          :onResize="onResizeCallback"
          @dragstop="onDragstop"
          @refLineParams="getRefLineParams"
          :grid="[1, 1]"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          v-for="(item, index) in webPageArr"
          :key="index"
          :snap="true"
          :snap-tolerance="5"
        >
          <div
            @dblclick="writeLogic"
           
            style="
              background: white;
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              color: black;
            "
          >
            网页
          </div>
        </vdr>
        <vdr
          :active="selectComponentId == item.type + index"
          :parent="false"
          :onDragStart="onDragStartWrapper(item, index)"
          :onDrag="onDragCallback"
          :onResize="onResizeCallback"
          @dragstop="onDragstop"
          @refLineParams="getRefLineParams"
          :grid="[1, 1]"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          v-for="(item, index) in PPTArr"
          :key="index"
          :snap="true"
          :snap-tolerance="5"
        >
          <div
            @dblclick="writeLogic"
           
            style="
              background: white;
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              color: black;
            "
          >
            PPT
          </div>
        </vdr>

        <vdr
          :active="selectComponentId == item.type + index"
          :parent="false"
          :onDragStart="onDragStartWrapper(item, index)"
          :onDrag="onDragCallback"
          :onResize="onResizeCallback"
          :draggable="!item.lockVDR"
          @dragstop="onDragstop"
          @refLineParams="getRefLineParams"
          :grid="[1, 1]"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          v-for="(item, index) in ThreeDArr"
          :key="index"
          :snap="true"
          :snap-tolerance="5"
        >
          <div
            :id="'renderCanvas' + index"
            style="width: 90%; height: 90%"
            touch-action="none"
          ></div>
        </vdr>

        <vdr
          :active="selectComponentId == item.type + index"
          :parent="false"
          :onDragStart="onDragStartWrapper(item, index)"
          :onDrag="onDragCallback"
          :onResize="onResizeCallback"
          @dragstop="onDragstop"
          @refLineParams="getRefLineParams"
          :grid="[1, 1]"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          v-for="(item, index) in buttonArr"
          :key="index"
          :snap="true"
          :snap-tolerance="5"
          ><div
            @dblclick="writeLogic"
            :style="{ width: item.w + 'px', height: item.h + 'px' }"
           
          >
            <el-button
              style="
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-color: transparent;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
              :style="{
                backgroundImage:
                  'url(' +
                  'http://' +
                  resourceIp +
                  ':8094/' +
                  item.background +
                  ')',
                backgroundSize: item.w + 'px ' + item.h + 'px',
                fontSize: item.fontSize + 'px',
                transform: 'rotate(' + item.rotate + 'deg)',
                color: item.fontColor,
                borderRadius: item.borderCorner + 'px',
                backgroundColor:
                  item.backgroundColor == null || item.backgroundColor == ''
                    ? 'transparent'
                    : item.backgroundColor,
              }"
              >{{
                language == 0
                  ? item.textChinese
                  : language == 1
                  ? item.textTraditional
                  : item.textEnglish
              }}</el-button
            >
          </div>
        </vdr>

        <vdr
          :active="selectComponentId == item.type + index"
          :parent="false"
          :onDragStart="onDragStartWrapper(item, index)"
          :onDrag="onDragCallback"
          :onResize="onResizeCallback"
          @dragstop="onDragstop"
          @refLineParams="getRefLineParams"
          :grid="[1, 1]"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          v-for="(item, index) in switchArr"
          :key="index"
          :snap="true"
          :snap-tolerance="5"
          style="display: flex; justify-content: center; align-items: center"
        >
          <div
            @dblclick="writeLogic"
            :style="{ width: item.w + 'px', height: item.h + 'px' }"
           
          >
            <van-switch
              style="height: 100%"
              :style="{
                width: item.w + 'px',
              }"
              v-model="item.value"
              :size="item.h + 'px'"
              :active-color="
                item.activeColor == null ? '#ee0a24' : item.activeColor
              "
              :inactive-color="
                item.unActiveColor == null ? '#dcdee0' : item.unActiveColor
              "
            />
          </div>
        </vdr>

        <vdr
          :active="selectComponentId == item.type + index"
          :parent="false"
          :onDragStart="onDragStartWrapper(item, index)"
          :onDrag="onDragCallback"
          :onResize="onResizeCallback"
          @dragstop="onDragstop"
          @refLineParams="getRefLineParams"
          :grid="[1, 1]"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          v-for="(item, index) in sliderArr"
          :key="index"
          :snap="true"
          :snap-tolerance="5"
        >
          <div
            @dblclick="writeLogic"
            :style="{ width: item.w + 'px', height: item.h + 'px' }"
           
          >
            <van-slider
              :vertical="item.vertical"
              v-model="item.value"
              :inactive-color="item.railBackground"
              :bar-height="item.vertical ? item.w + 'px' : item.h + 'px'"
              :active-color="item.railProgressColor"
              :style="{
                border:
                  'solid ' +
                  item.railBorderWidth +
                  'px ' +
                  item.railBorderColor,
                borderRadius: item.railBorderRoundCorner + 'px',
              }"
            >
              <template #button>
                <img
                  v-if="item.sliderBackground != null"
                  :src="
                    'http://' + resourceIp + ':8094/' + item.sliderBackground
                  "
                  :style="{
                    width: item.sliderWidth + 'px',
                    height: item.sliderHeight + 'px',
                    marginLeft: item.sliderMarginLeft + 'px',
                    marginRight: item.sliderMarginRight + 'px',
                    marginTop: item.sliderMarginTop + 'px',
                    marginBottom: item.sliderMarginBottom + 'px',
                  }"
                  draggable="false"
                />
                <div
                  v-if="item.sliderBackground == null"
                  :style="{
                    width: item.sliderWidth + 'px',
                    height: item.sliderHeight + 'px',
                    marginLeft: item.sliderMarginLeft + 'px',
                    marginRight: item.sliderMarginRight + 'px',
                    marginTop: item.sliderMarginTop + 'px',
                    marginBottom: item.sliderMarginBottom + 'px',
                    backgroundColor: item.sliderBackgroundColor,
                    borderRadius: item.sliderBorderRadius + 'px',
                  }"
                  draggable="false"
                ></div>
              </template>
            </van-slider>
          </div>
        </vdr>

        <vdr
          :active="selectComponentId == item.type + index"
          :parent="false"
          :onDragStart="onDragStartWrapper(item, index)"
          :onDrag="onDragCallback"
          :onResize="onResizeCallback"
          @dragstop="onDragstop"
          @refLineParams="getRefLineParams"
          :grid="[1, 1]"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          v-for="(item, index) in imgArr"
          :key="index"
          :snap="true"
          :snap-tolerance="5"
        >
          <img
            @dblclick="writeLogic"
           
            :src="'http://' + resourceIp + ':8094/' + item.src"
            style="width: 100%; height: 100%"
            :style="{
              transform: 'rotate(' + item.rotate + 'deg)',
            }"
            alt=""
          />
        </vdr>

        <vdr
          :active="selectComponentId == item.type + index"
          :parent="false"
          :onDragStart="onDragStartWrapper(item, index)"
          :onDrag="onDragCallback"
          :onResize="onResizeCallback"
          @dragstop="onDragstop"
          @refLineParams="getRefLineParams"
          :grid="[1, 1]"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          v-for="(item, index) in videoArr"
          :key="index"
          :snap="true"
          :snap-tolerance="5"
        >
          <div
            @dblclick="writeLogic"
           
            style="width: 100%; height: 100%; background: black"
            alt=""
          ></div>
        </vdr>

        <vdr
          :active="selectComponentId == item.type + index"
          :parent="false"
          :onDragStart="onDragStartWrapper(item, index)"
          :onDrag="onDragCallback"
          @dragstop="onDragstop"
          :onResize="onResizeCallback"
          @refLineParams="getRefLineParams"
          :grid="[1, 1]"
          :w="item.w"
          :h="item.h"
          :x="item.x"
          :y="item.y"
          :z="item.z"
          v-for="(item, index) in inputArr"
          :key="index"
          :snap="true"
          :snap-tolerance="5"
        >
          <textarea
            @dblclick="writeLogic"
           
            v-model="
              item[
                language == '0'
                  ? 'textValue'
                  : language == '1'
                  ? 'traditionalTextValue'
                  : 'englishTextValue'
              ]
            "
            style="
              width: 100%;
              height: 100%;
              outline: 0;
              border: 0;
              background-color: transparent;
            "
            :style="{
              fontSize: item.fontSize + 'px',
              color: item.fontColor,
              transform: 'rotate(' + item.rotate + 'deg)',
            }"
          ></textarea>
        </vdr>

        <span
          class="ref-line v-line"
          v-for="item in vLine"
          v-show="item.display"
          :style="{
            left: item.position,
            top: item.origin,
            height: item.lineLength,
          }"
        />
        <span
          class="ref-line h-line"
          v-for="item in hLine"
          v-show="item.display"
          :style="{
            top: item.position,
            left: item.origin,
            width: item.lineLength,
          }"
        />
      </div>
      <iframe
        style="width: 100%; height: 100%"
        v-if="showPreView == 1"
        :src="
          'http://' + this.resourceIp + ':8094/#/displayPage/' + pageName + '/0'
        "
        frameborder="0"
      ></iframe>
    </vdr>

    <!-- 头部 -->

    <div
      style="
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1000;
        display: flex;
        pointer-events: none;
        flex-direction: column;

        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      "
    >
      <div
        style="
          width: 100%;
          background: #0a1c4a;
          display: flex;
          flex-direction: column;
          align-items: center;
          pointer-events: auto;
        "
        :style="{ height: outsideAttribute.headBarHeight + 'px' }"
      >
        <div
          style="
            width: calc(100% - 4px);
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: space-between;
            flex: 1;
            background: #0b4493;
            border: solid 2px #0066a8;
          "
        >
          <div style="display: flex; align-items: center">
            <img
              src="../assets/更多.png"
              style="width: 30px; height: 30px; margin-left: 10px"
              alt=""
            />
            <div style="color: #f2f2f2; margin-left: 10px">深工中控toolbox</div>
          </div>
          <div style="margin-right: 10px; color: #f2f2f2">微信用户12222</div>
        </div>
        <div
          style="
            width: calc(100% - 4px);
            margin: 5px 0;
            display: flex;
            align-items: center;
            flex: 1;
            background: #0b4493;
            border: solid 2px #0066a8;
          "
        >
          <div
            style="display: flex; align-items: center; flex: 1; height: 100%"
          >
            <button style="margin-left: 10px" @click="saveNewPage">保存</button>
            <button style="margin-left: 10px" @click="outputPage">导出</button>
            <button style="margin-left: 10px" @click="clickImportPageXml">
              导入
            </button>
            <input
              style="display: none"
              type="file"
              id="ImportPageXml"
              @change="ImportPageXmlTemplate"
            />
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              flex: 2;
              height: 100%;
              justify-content: center;
            "
          >
            <div
              style="
                display: flex;
                align-items: center;
                padding: 10px;
                background: #383838;
                border-radius: 5px 0 0 5px;
              "
            >
              <img
                @click="showPreView = 1"
                :src="
                  showPreView == 1
                    ? require('../assets/playstop.png')
                    : require('../assets/play.png')
                "
                style="width: 20px; height: 20px"
                alt=""
              />
              <img
                @click="showPreView = 0"
                :src="
                  showPreView == 1
                    ? require('../assets/stop.png')
                    : require('../assets/stoped.png')
                "
                style="width: 20px; height: 20px; margin-left: 10px"
                alt=""
              />
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                padding: 10px;
                margin-left: 10px;
                background: #383838;
                border-radius: 0 10px 10px 0;
              "
            >
              <img
                src="../assets/more.png"
                style="width: 20px; height: 20px"
                alt=""
              />
            </div>
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              flex: 1;
              height: 100%;
              display: flex;
              flex-direction: column;
            "
          >
            <div style="width: 100%; display: flex; align-items: center"></div>
          </div>
        </div>
      </div>
      <div style="flex: 1; display: flex; align-items: center">
        <div
          style="
            background: #0a1c4a;
            display: flex;
            pointer-events: auto;
            flex-shrink: 0;
          "
          :style="{
            height: '100%',
            width: outsideAttribute.sideWidth + 'px',
          }"
        >
          <div
            style="
              width: 50px;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              border: solid 2px #0066a8;
              background: linear-gradient(to bottom, #0d3887, #0b1f4f);
            "
          >
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 10px;
              "
            >
              <img
                src="../assets/编辑1.png"
                style="width: 45px; height: 45px"
                alt=""
              />
              <img
                src="../assets/逻辑.png"
                style="width: 45px; height: 45px"
                alt=""
              />
            </div>
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 10px;
              "
            >
              <img
                src="../assets/设置.png"
                style="width: 45px; height: 45px"
                alt=""
              />
            </div>
          </div>
          <div
            v-if="editMode == 2"
            style="
              flex: 1;
              height: 100%;
              background: linear-gradient(to bottom, #0d3887, #0b1f4f);
              display: flex;
              flex-direction: column;
              align-items: end;
              border: solid 2px #0066a8;
              margin: 0 10px;
            "
          >
            <div
              @click="showPageComponents = !showPageComponents"
              style="
                width: 100%;
                display: flex;
                align-items: center;
                cursor: pointer;
              "
            >
              <img
                src="../assets/未展开.png"
                style="width: 15px; height: 15px"
                alt=""
              />
              <img
                src="../assets/页面.png"
                style="width: 40px; height: 40px"
                alt=""
              />
              <div style="display: flex; color: white">逻辑组件</div>
            </div>
            <div
              @click="selectLogicComponent(item)"
              v-for="(item, index) in logicNodeArr"
              :key="index"
              style="
                width: 80%;
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: flex;
                align-items: center;
                color: white;
                margin-top: 10px;
                cursor: pointer;
                margin-right: 10px;
              "
              :style="{
                borderBottom: selectLogicId == item ? 'solid 1px white' : null,
              }"
            >
              <div style="display: flex; align-items: center">{{ item }}</div>
            </div>
          </div>
          <div
            v-if="editMode == 1"
            style="
              flex: 1;
              height: 100%;
              background: linear-gradient(to bottom, #0d3887, #0b1f4f);
              display: flex;
              flex-direction: column;
              align-items: end;

              border: solid 2px #0066a8;
              margin: 0 10px;
            "
          >
            <div
              @click="showPageComponents = !showPageComponents"
              style="
                width: 100%;
                display: flex;
                align-items: center;
                cursor: pointer;
              "
            >
              <img
                src="../assets/未展开.png"
                style="width: 15px; height: 15px"
                alt=""
              />
              <img
                src="../assets/页面.png"
                style="width: 40px; height: 40px"
                alt=""
              />
              <div style="display: flex; color: white">
                {{ pageName }}
              </div>
            </div>
            <div
              v-if="showPageComponents"
              style="
                display: flex;
                flex-direction: column;

                width: 100%;
              "
            >
              <div
                @click="showButtonsList = !showButtonsList"
                v-if="buttonArr.length > 0"
                style="
                  width: 90%;
                  margin-left: 10%;
                  display: flex;
                  align-items: center;
                  margin-top: 10px;
                  cursor: pointer;
                "
              >
                <img
                  src="../assets/未展开.png"
                  style="width: 15px; height: 15px"
                  alt=""
                />
                <img
                  src="../assets/按钮.png"
                  style="width: 40px; height: 40px"
                  alt=""
                />
                <div style="display: flex; align-items: end; color: white">
                  按钮组
                </div>
              </div>
              <div
                v-if="showButtonsList"
                style="width: 100%; display: flex; flex-direction: column"
              >
                <div
                  @click="clickComponentByList(buttonArr, index)"
                  v-for="(item, index) in buttonArr"
                  :key="index"
                  style="
                    width: 70%;
                    margin-left: 30%;
                    display: flex;
                    align-items: center;
                    color: white;
                    margin-top: 10px;
                    cursor: pointer;
                  "
                >
                  <div
                    style="display: flex; align-items: center"
                    :style="{
                      borderBottom:
                        selectComponentId == item.type + index
                          ? 'solid 1px white'
                          : null,
                    }"
                  >
                    {{
                      language == 0
                        ? item.textChinese
                        : language == 1
                        ? item.textTraditional
                        : item.textEnglish
                    }}
                  </div>
                </div>
              </div>
              <div
                @click="showSwitchsList = !showSwitchsList"
                v-if="switchArr.length > 0"
                style="
                  width: 90%;
                  margin-left: 10%;
                  display: flex;
                  align-items: center;
                  margin-top: 10px;
                  cursor: pointer;
                "
              >
                <img
                  src="../assets/未展开.png"
                  style="width: 15px; height: 15px"
                  alt=""
                />
                <img
                  src="../assets/开关.png"
                  style="width: 30px; height: 30px; margin: 0 5px"
                  alt=""
                />
                <div style="display: flex; color: white">开关组</div>
              </div>
              <div
                v-if="showSwitchsList"
                style="width: 100%; display: flex; flex-direction: column"
              >
                <div
                  @click="clickComponentByList(switchArr, index)"
                  v-for="(item, index) in switchArr"
                  :key="index"
                  style="
                    width: 70%;
                    margin-left: 30%;
                    display: flex;
                    align-items: center;
                    color: white;
                    margin-top: 10px;
                    cursor: pointer;
                  "
                >
                  <div
                    style="display: flex; align-items: center"
                    :style="{
                      borderBottom:
                        selectComponentId == item.type + index
                          ? 'solid 1px white'
                          : null,
                    }"
                  >
                    Switch {{ index }}
                  </div>
                </div>
              </div>
              <div
                @click="showSlidersList = !showSlidersList"
                v-if="sliderArr.length > 0"
                style="
                  width: 90%;
                  margin-left: 10%;
                  display: flex;
                  align-items: center;
                  margin-top: 10px;
                  cursor: pointer;
                "
              >
                <img
                  src="../assets/未展开.png"
                  style="width: 15px; height: 15px"
                  alt=""
                />
                <img
                  src="../assets/滑块.png"
                  style="width: 40px; height: 40px"
                  alt=""
                />
                <div style="display: flex; color: white">滑块组</div>
              </div>
              <div
                v-if="showSlidersList"
                style="width: 100%; display: flex; flex-direction: column"
              >
                <div
                  @click="clickComponentByList(sliderArr, index)"
                  v-for="(item, index) in sliderArr"
                  :key="index"
                  style="
                    width: 70%;
                    margin-left: 30%;
                    display: flex;
                    align-items: center;
                    color: white;
                    margin-top: 10px;
                    cursor: pointer;
                  "
                >
                  <div
                    style="display: flex; align-items: center"
                    :style="{
                      borderBottom:
                        selectComponentId == item.type + index
                          ? 'solid 1px white'
                          : null,
                    }"
                  >
                    Slider {{ index }}
                  </div>
                </div>
              </div>
              <div
                @click="showImagesList = !showImagesList"
                v-if="imgArr.length > 0"
                style="
                  width: 90%;
                  margin-left: 10%;
                  display: flex;
                  align-items: center;
                  margin-top: 10px;
                  cursor: pointer;
                "
              >
                <img
                  src="../assets/未展开.png"
                  style="width: 15px; height: 15px"
                  alt=""
                />
                <img
                  src="../assets/图片.png"
                  style="width: 40px; height: 40px"
                  alt=""
                />
                <div style="display: flex; color: white">图片组</div>
              </div>
              <div
                v-if="showImagesList"
                style="width: 100%; display: flex; flex-direction: column"
              >
                <div
                  @click="clickComponentByList(imgArr, index)"
                  v-for="(item, index) in imgArr"
                  :key="index"
                  style="
                    width: 70%;
                    margin-left: 30%;
                    display: flex;
                    align-items: center;
                    color: white;
                    margin-top: 10px;
                    cursor: pointer;
                  "
                >
                  <div
                    style="display: flex; align-items: center"
                    :style="{
                      borderBottom:
                        selectComponentId == item.type + index
                          ? 'solid 1px white'
                          : null,
                    }"
                  >
                    Image {{ index }}
                  </div>
                </div>
              </div>
              <div
                @click="showTextViewsList = !showTextViewsList"
                v-if="inputArr.length > 0"
                style="
                  width: 90%;
                  margin-left: 10%;
                  display: flex;
                  align-items: center;
                  margin-top: 20px;
                  cursor: pointer;
                "
              >
                <img
                  src="../assets/未展开.png"
                  style="width: 15px; height: 15px"
                  alt=""
                />
                <img
                  src="../assets/文本框.png"
                  style="width: 30px; height: 30px; margin: 0 5px"
                  alt=""
                />
                <div style="display: flex; color: white">文本框组</div>
              </div>
              <div
                v-if="showTextViewsList"
                style="width: 100%; display: flex; flex-direction: column"
              >
                <div
                  @click="clickComponentByList(inputArr, index)"
                  v-for="(item, index) in inputArr"
                  :key="index"
                  style="
                    width: 70%;
                    margin-left: 30%;
                    display: flex;
                    align-items: center;
                    color: white;
                    margin-top: 10px;
                    cursor: pointer;
                  "
                >
                  <div
                    style="display: flex; align-items: center"
                    :style="{
                      borderBottom:
                        selectComponentId == item.type + index
                          ? 'solid 1px white'
                          : null,
                    }"
                  >
                    TextView {{ index }}
                  </div>
                </div>
              </div>
              <div
                @click="showStreamsList = !showStreamsList"
                v-if="videoArr.length > 0"
                style="
                  width: 90%;
                  margin-left: 10%;
                  display: flex;
                  align-items: center;
                  margin-top: 20px;
                  cursor: pointer;
                "
              >
                <img
                  src="../assets/未展开.png"
                  style="width: 15px; height: 15px"
                  alt=""
                />
                <img
                  src="../assets/流媒体.png"
                  style="width: 30px; height: 30px; margin: 0 5px"
                  alt=""
                />
                <div style="display: flex; color: white">流媒体组</div>
              </div>
              <div
                @click="clickComponentByList(videoArr, index)"
                v-if="showStreamsList"
                style="width: 100%; display: flex; flex-direction: column"
              >
                <div
                  v-for="(item, index) in videoArr"
                  :key="index"
                  style="
                    width: 70%;
                    margin-left: 30%;
                    display: flex;
                    align-items: center;
                    color: white;
                    margin-top: 10px;
                    cursor: pointer;
                  "
                >
                  <div
                    style="display: flex; align-items: center"
                    :style="{
                      borderBottom:
                        selectComponentId == item.type + index
                          ? 'solid 1px white'
                          : null,
                    }"
                  >
                    Stream {{ index }}
                  </div>
                </div>
              </div>
              <div
                @click="showWebPagesList = !showWebPagesList"
                v-if="webPageArr.length > 0"
                style="
                  width: 90%;
                  margin-left: 10%;
                  display: flex;
                  align-items: center;
                  margin-top: 20px;
                  cursor: pointer;
                "
              >
                <img
                  src="../assets/未展开.png"
                  style="width: 15px; height: 15px"
                  alt=""
                />
                <img
                  src="../assets/网页.png"
                  style="width: 30px; height: 30px; margin: 0 5px"
                  alt=""
                />
                <div style="display: flex; color: white">网页组</div>
              </div>
              <div
                @click="clickComponentByList(webPageArr, index)"
                v-if="showWebPagesList"
                style="
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: end;
                "
              >
                <div
                  v-for="(item, index) in webPageArr"
                  :key="index"
                  style="
                    width: 70%;
                    margin-left: 30%;
                    display: flex;
                    align-items: center;
                    color: white;
                    margin-top: 10px;
                    cursor: pointer;
                  "
                >
                  <div
                    style="display: flex; align-items: center"
                    :style="{
                      borderBottom:
                        selectComponentId == item.type + index
                          ? 'solid 1px white'
                          : null,
                    }"
                  >
                    WebPage {{ index }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- middle start -->
        <div
          style="
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
          "
        >
          <div
            id="showVDR"
            style="
              width: 100%;
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;
            "
            :style="{
              pointerEvents: editMode == 1 ? 'none' : 'auto',
            }"
          >
            <div
              v-show="editMode == 2"
              id="logicCanvas"
              style="flex: 1; width: 100%"
            ></div>
            <div
              v-if="editMode == 2"
              style="
                width: 5%;
                margin-left: 90%;
                height: 30px;
                display: flex;
                justify-content: end;
                align-items: center;
                z-index: 1000;
              "
            >
              <img
                @click="goBackMode"
                src="../assets/返回.png"
                style="width: 20px; height: 20px; cursor: pointer"
                alt=""
              />
              <img
                @click="saveLogicCanvas"
                src="../assets/正确.png"
                style="
                  margin-left: 10px;
                  width: 20px;
                  height: 20px;
                  cursor: pointer;
                "
                alt=""
              />
              <img
                @click="clearLogicCanvas"
                src="../assets/取消.png"
                style="
                  width: 20px;
                  height: 20px;
                  margin-left: 10px;
                  cursor: pointer;
                "
                alt=""
              />
            </div>
          </div>

          <div
            style="
              width: 100%;
              height: 300px;
              pointer-events: auto;
              background: linear-gradient(to right bottom, #0a1c4a, #133e8d);
              display: flex;
              flex-direction: column;
            "
          >
            <div
              v-if="editMode == 1"
              id="selectArea"
              style="
                width: calc(100% - 4px);
                flex: 1;
                margin-top: 15px;
                background: transparent;

                display: flex;
                flex-direction: column;
                align-items: center;
                border: solid 2px #0066a8;
              "
            >
              <div
                style="
                  height: 30px;
                  overflow: auto;
                  margin-top: 5px;
                  border-radius: 0;
                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                  background: #103985;
                "
                :style="{
                  width: selectAreaWidth - 10 + 'px',
                }"
              >
                <div
                  @click="selectComponentType(0)"
                  :class="
                    selectedComponent == 0
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  按钮
                </div>
                <div
                  @click="selectComponentType(1)"
                  :class="
                    selectedComponent == 1
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  开关
                </div>
                <div
                  @click="selectComponentType(2)"
                  :class="
                    selectedComponent == 2
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  滑块
                </div>
                <div
                  @click="selectComponentType(3)"
                  :class="
                    selectedComponent == 3
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  图片
                </div>
                <div
                  @click="selectComponentType(4)"
                  :class="
                    selectedComponent == 4
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  文本框
                </div>
                <div
                  @click="selectComponentType(5)"
                  :class="
                    selectedComponent == 5
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  流媒体
                </div>
                <div
                  @click="selectComponentType(6)"
                  :class="
                    selectedComponent == 6
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  网页
                </div>
                <div
                  @click="selectComponentType(7)"
                  :class="
                    selectedComponent == 7
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  PPT
                </div>
                <div
                  @click="selectComponentType(8)"
                  :class="
                    selectedComponent == 8
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  3D
                </div>
              </div>
              <div
                style="
                  flex-wrap: wrap;
                  display: flex;
                  margin: 5px 0;
                  border-radius: 10px;
                  overflow: auto;
                  background: linear-gradient(
                    to right,
                    rgba(16, 49, 114, 0),
                    rgba(16, 49, 114, 1)
                  );
                "
                :style="{
                  width: selectAreaWidth - 10 + 'px',
                  height: selectAreaHeight + 'px',
                }"
              >
                <div
                  @click="createComponent(index)"
                  v-for="(item, index) in prebuildComponentArr"
                  :key="index"
                  style="
                    width: 120px;
                    height: 100px;
                    border: dashed 1px grey;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    position: relative;
                    margin: 10px;
                  "
                >
                  <div
                    @click.stop="deleteComponentFormat(item.id)"
                    style="
                      position: absolute;
                      background: red;
                      width: 20px;
                      height: 20px;
                      top: -10px;
                      right: -10px;
                      color: white;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      border-radius: 50%;
                    "
                  >
                    x
                  </div>
                  <el-button
                    v-if="item.type == 'BUTTON'"
                    :style="{
                      backgroundImage:
                        'url(' +
                        'http://' +
                        resourceIp +
                        ':8094/' +
                        item.background +
                        ')',

                      fontSize: item.fontSize + 'px',
                      color: item.fontColor,
                      borderRadius: item.borderCorner + 'px',
                      backgroundColor:
                        item.backgroundColor == null ||
                        item.backgroundColor == ''
                          ? 'transparent'
                          : item.backgroundColor,
                    }"
                    style="
                      background-position: center;
                      background-repeat: no-repeat;
                      background-size: cover;
                      width: 110px;
                      border: 0;
                    "
                    >{{
                      language == 0
                        ? item.textChinese
                        : language == 1
                        ? item.textTraditional
                        : item.textEnglish
                    }}</el-button
                  >

                  <van-switch
                    v-if="item.type == 'SWITCH'"
                    :active-color="
                      item.activeColor == null ? '#ee0a24' : item.activeColor
                    "
                    :inactive-color="
                      item.unActiveColor == null
                        ? '#dcdee0'
                        : item.unActiveColor
                    "
                  />

                  <div
                    v-if="item.type == 'SLIDER'"
                    :style="{ width: item.w + 'px', height: item.h + 'px' }"
                  >
                    <van-slider
                      :vertical="item.vertical"
                      :bar-height="
                        item.vertical ? item.w + 'px' : item.h + 'px'
                      "
                      :inactive-color="item.railBackground"
                      :active-color="item.railProgressColor"
                      :style="{
                        border:
                          'solid ' +
                          item.railBorderWidth +
                          'px ' +
                          item.railBorderColor,
                        borderRadius: item.railBorderRoundCorner + 'px',
                      }"
                    >
                      <template #button>
                        <img
                          v-if="item.sliderBackground != null"
                          :src="
                            'http://' +
                            resourceIp +
                            ':8094/' +
                            item.sliderBackground
                          "
                          :style="{
                            width: item.sliderWidth + 'px',
                            height: item.sliderHeight + 'px',
                            marginLeft: item.sliderMarginLeft + 'px',
                            marginRight: item.sliderMarginRight + 'px',
                            marginTop: item.sliderMarginTop + 'px',
                            marginBottom: item.sliderMarginBottom + 'px',
                          }"
                          draggable="false"
                        />
                        <div
                          v-if="item.sliderBackground == null"
                          :style="{
                            width: item.sliderWidth + 'px',
                            height: item.sliderHeight + 'px',
                            marginLeft: item.sliderMarginLeft + 'px',
                            marginRight: item.sliderMarginRight + 'px',
                            marginTop: item.sliderMarginTop + 'px',
                            marginBottom: item.sliderMarginBottom + 'px',
                            backgroundColor: item.sliderBackgroundColor,
                            borderRadius: item.sliderBorderRadius + 'px',
                          }"
                          draggable="false"
                        ></div>
                      </template>
                    </van-slider>
                  </div>
                  <img
                    v-if="item.type == 'IMAGE'"
                    :src="'http://' + resourceIp + ':8094/' + item.src"
                    style="width: 80px; height: 50px"
                    :style="{
                      transform: 'rotate(' + item.rotate + 'deg)',
                    }"
                    alt=""
                  />
                  <textarea
                    v-if="item.type == 'TEXTVIEW'"
                    v-model="
                      item[
                        language == '0'
                          ? 'textValue'
                          : language == '1'
                          ? 'traditionalTextValue'
                          : 'englishTextValue'
                      ]
                    "
                    style="
                      width: 90%;
                      height: 50%;
                      outline: 0;
                      border: 0;
                      background-color: transparent;
                    "
                    :style="{
                      fontSize: item.fontSize + 'px',
                      color: item.fontColor,
                      transform: 'rotate(' + item.rotate + 'deg)',
                    }"
                  ></textarea>
                  <div
                    v-if="item.type == 'VIDEO'"
                    style="width: 100%; height: 50%; background: black"
                    alt=""
                  ></div>
                  <div
                    v-if="item.type == 'WEBPAGE'"
                    style="background: white; width: 100%; height: 50%"
                  ></div>
                  <div
                    v-if="item.type == 'PPT'"
                    style="background: white; width: 100%; height: 50%"
                  ></div>
                  <div
                    v-if="item.type == '3D'"
                    style="background: white; width: 100%; height: 50%"
                  ></div>
                  <div style="color: white; margin-top: 10px">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="editMode == 2"
              id="selectArea"
              style="
                width: calc(100% - 4px);
                flex: 1;
                margin-top: 15px;
                background: transparent;

                display: flex;
                flex-direction: column;
                align-items: center;
                border: solid 2px #0066a8;
              "
            >
              <div
                style="
                  height: 30px;
                  overflow: auto;
                  margin-top: 5px;

                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                  background: #103985;
                "
                :style="{
                  width: selectAreaWidth - 10 + 'px',
                }"
              >
                <div
                  @click="selectComponentType(0)"
                  :class="
                    selectedComponent == 0
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  逻辑控件
                </div>
                <div
                  @click="selectComponentType(1)"
                  :class="
                    selectedComponent == 1
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  深工模块
                </div>
                <div
                  @click="selectComponentType(2)"
                  :class="
                    selectedComponent == 2
                      ? 'selectedComponentClass'
                      : 'selectingComponent'
                  "
                >
                  自定义模块
                </div>
              </div>
              <div
                style="
                  flex-wrap: wrap;
                  display: flex;
                  margin: 5px 0;
                  border-radius: 10px;
                  overflow: auto;
                "
                :style="{
                  width: selectAreaWidth - 10 + 'px',
                  height: selectAreaHeight + 'px',
                }"
              >
                <div
                  @click="createLogicComponent(index)"
                  v-for="(item, index) in logicComponentArr"
                  :key="index"
                  style="
                    padding: 5px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    height: 20px;
                  "
                >
                  <div
                    style="
                      color: white;
                      margin-top: 10px;
                      background: white;
                      border: solid 2px black;
                      color: black;
                      padding: 5px;
                      border-radius: 5px;
                    "
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- middle end -->
        <div
          id="editRightBar"
          style="
            background: #0b1e4f;
            pointer-events: auto;
            display: flex;
            flex-shrink: 0;
          "
          :style="{
            height: '100%',
            width: outsideAttribute.sideWidth + 'px',
          }"
        >
          <div
            v-if="
              curComponent != null && curComponentIndex != null && editMode == 1
            "
            style="
              border: solid 2px #0066a8;
              background: linear-gradient(to bottom, #0d3887, #0b1f4f);
              display: flex;
              flex-direction: column;
              align-items: center;

              overflow: auto;
              margin-left: 10px;
              flex: 1;
            "
            :style="{
              height: editRightBarHeight + 'px',
            }"
          >
            <div
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin: 10px 0;
                flex-shrink: 0;
              "
            >
              <el-checkbox
                v-model="curComponent.conditionShow"
                style="color: white"
                >显示表达式</el-checkbox
              >
            </div>
            <div
              style="
                width: 95%;
                color: white;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                flex-shrink: 0;
              "
            >
              <div>变量名称</div>
              <input
                :disabled="!curComponent.conditionShow"
                style="flex: 1; margin-left: 10px"
                v-model="curComponent.displayVariableName"
              />
            </div>
            <div
              style="
                width: 95%;
                color: white;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                flex-shrink: 0;
              "
            >
              <div>变量值</div>
              <input
                :disabled="!curComponent.conditionShow"
                style="flex: 1; margin-left: 10px"
                v-model="curComponent.displayVariableValue"
              />
            </div>
            <div
              v-if="curComponent.type == 'VIDEO'"
              style="
                width: 95%;
                color: white;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                flex-shrink: 0;
              "
            >
              <div v-if="curComponent.videoType == 0">视频地址变量</div>
              <div
                v-if="
                  curComponent.videoType == 1 ||
                  curComponent.videoType == 2 ||
                  curComponent.videoType == 3 ||
                  curComponent.videoType == 4
                "
              >
                流地址变量
              </div>

              <input
                style="flex: 1; margin-left: 10px"
                v-model="curComponent.streamVariable"
              />
            </div>
            <div
              v-if="curComponent.type == 'WEBPAGE'"
              style="
                width: 95%;
                color: white;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                flex-shrink: 0;
              "
            >
              <div>网址变量</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="curComponent.webPageUrlVariable"
              />
            </div>
            <div
              v-if="curComponent.type == 'PPT'"
              style="
                width: 95%;
                color: white;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                flex-shrink: 0;
              "
            >
              <div>地址变量</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="curComponent.pptUrlVariable"
              />
            </div>
            <div
              v-if="curComponent.type == 'SWITCH'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin: 10px 0;
                flex-shrink: 0;
                color: white;
              "
            >
              开关打开表达式
            </div>
            <div
              v-if="curComponent.type == 'SWITCH'"
              style="
                width: 95%;
                color: white;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                flex-shrink: 0;
              "
            >
              <div>开关变量</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="curComponent.switchVariable"
              />
            </div>

            <div
              v-if="curComponent.type == 'SWITCH'"
              style="
                width: 95%;
                color: white;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                flex-shrink: 0;
              "
            >
              <div>变量值</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="curComponent.switchVariableValue"
              />
            </div>
            <div
              v-if="curComponent.type == 'SLIDER'"
              style="
                width: 95%;
                color: white;
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                flex-shrink: 0;
              "
            >
              <div>滑块值变量</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="curComponent.sliderVariable"
              />
            </div>
            <div
              v-if="curComponent.type == 'SLIDER'"
              style="width: 95%; display: flex; align-items: center"
            >
              <el-checkbox v-model="curComponent.keepLast" style="color: white"
                >保存上一次滑动的值</el-checkbox
              >
            </div>
            <div
              v-if="curComponent.type == 'SLIDER'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
              "
            >
              <div style="color: white; white-space: nowrap">变量名</div>
              <input
                style="flex: 1; margin-left: 10px; color: white"
                v-model="curComponent.lastSlideName"
              />
            </div>
            <div
              v-if="curComponent.type == '3D'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
              "
            >
              <div style="color: white; white-space: nowrap">锁定</div>
              <el-checkbox
                style="margin-left: 5px"
                v-model="curComponent.lockVDR"
              ></el-checkbox>
            </div>
            <div
              v-if="curComponent.type == '3D'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
              "
            >
              <div style="color: white; white-space: nowrap">模型地址</div>
              <input
                style="flex: 1; margin-left: 10px; color: white"
                v-model="addingModulePath"
              />
            </div>

            <button
              v-if="curComponent.type == '3D'"
              style="width: 95%"
              @click="loadModule"
            >
              加载模型
            </button>
            <div
              v-if="curComponent.type == '3D'"
              style="
                width: 95%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 10px;
              "
            >
              <div style="color: white; white-space: nowrap">资源列表</div>
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                "
              >
                <div
                  v-for="(item, index) in Array.from(threeDResourceMap.keys())"
                  :key="index"
                  style="
                    color: white;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                  "
                >
                  <div style="display: flex; align-items: center">
                    <div
                      style="
                        width: 100px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >
                      {{ item }}
                    </div>

                    <button style="background: black">删除</button>
                    <button
                      style="background: black"
                      @click="changeSonResources(item, index)"
                    >
                      展开
                    </button>
                  </div>
                  <div v-if="openSourceList == index">
                    <div
                      v-for="(sonItem, sonIndex) in sonResource"
                      :key="sonIndex"
                      style="display: flex; align-items: center"
                    >
                      <div
                        style="
                          width: 100px;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        {{ sonItem }}
                      </div>
                      <button
                        @click="add3DObjectInScene(item, sonItem)"
                        style="background: black"
                      >
                        添加
                      </button>
                      <button style="background: black">删除</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="curComponent.type == '3D'"
              style="
                width: 95%;
                display: flex;
                flex-direction: column;

                margin-top: 10px;
              "
            >
              <div
                @click="selectMesh(index)"
                style="
                  color: white;
                  width: 100%;
                  cursor: pointer;
                  margin: 5px 0;
                  text-align: left;
                  display: flex;
                  align-items: center;
                "
                :style="{
                  borderBottom:
                    selectedMeshIndex == index ? 'solid 1px white' : null,
                }"
                v-for="(item, index) in MeshArr"
                :key="index"
                v-show="item.sceneId == curComponentIndex"
              >
                {{ item.name }}
                <button @click="clone3DObject(index)">克隆</button>
              </div>
            </div>
            <div
              v-if="curComponent.type == '3D'"
              style="width: 95%; display: flex; align-items: center"
            >
              <button @click="changeOperationMode(0)">平移</button>
              <button @click="changeOperationMode(1)">旋转</button>
              <button @click="changeOperationMode(2)">缩放</button>
              <button @click="changeOperationMode(3)">取消相机锁定</button>
            </div>
            <div
              v-if="curComponent.type == '3D' && selectedMeshIndex != null"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                color: white;
              "
            >
              <div>x</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="MeshArr[selectedMeshIndex].mesh.position.x"
              />
            </div>
            <div
              v-if="curComponent.type == '3D' && selectedMeshIndex != null"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                color: white;
              "
            >
              <div>y</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="MeshArr[selectedMeshIndex].mesh.position.y"
              />
            </div>
            <div
              v-if="curComponent.type == '3D' && selectedMeshIndex != null"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                color: white;
              "
            >
              <div>z</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="MeshArr[selectedMeshIndex].mesh.position.z"
              />
            </div>
            <div
              v-if="curComponent.type == '3D' && selectedMeshIndex != null"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                color: white;
              "
            >
              <div>scalingx</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="MeshArr[selectedMeshIndex].mesh.scale.x"
              />
            </div>
            <div
              v-if="curComponent.type == '3D' && selectedMeshIndex != null"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                color: white;
              "
            >
              <div>scalingy</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="MeshArr[selectedMeshIndex].mesh.scale.y"
              />
            </div>
            <div
              v-if="curComponent.type == '3D' && selectedMeshIndex != null"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                color: white;
              "
            >
              <div>scalingz</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="MeshArr[selectedMeshIndex].mesh.scale.z"
              />
            </div>
            <div
              v-if="curComponent.type == '3D' && selectedMeshIndex != null"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                color: white;
              "
            >
              <div>rotationX</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="MeshArr[selectedMeshIndex].mesh.quaternion.x"
              />
            </div>
            <div
              v-if="curComponent.type == '3D' && selectedMeshIndex != null"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                color: white;
              "
            >
              <div>rotationY</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="MeshArr[selectedMeshIndex].mesh.quaternion.y"
              />
            </div>
            <div
              v-if="curComponent.type == '3D' && selectedMeshIndex != null"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                color: white;
              "
            >
              <div>rotationZ</div>
              <input
                style="flex: 1; margin-left: 10px"
                v-model="MeshArr[selectedMeshIndex].mesh.quaternion.z"
              />
            </div>
            <el-collapse style="width: 95%; background: transparent">
              <el-collapse-item>
                <template slot="title"> 位置和尺寸 </template>
                <div style="width: 100%; display: flex; flex-direction: column">
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>顶部</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.y"
                    />
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>左侧</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.x"
                    />
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>宽度</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.w"
                    />
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>高度</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.h"
                    />
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>层级</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.z"
                    />
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item
                v-if="
                  curComponent.type == 'BUTTON' ||
                  curComponent.type == 'TEXTVIEW'
                "
                title="字体设置"
              >
                <div style="width: 100%; display: flex; flex-direction: column">
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>字体颜色</div>
                    <div style="margin-left: 10px">
                      <el-color-picker
                        v-model="curComponent.fontColor"
                      ></el-color-picker>
                    </div>
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>字体大小</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.fontSize"
                    />
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>简体中文</div>
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>文本内容</div>
                    <input
                      v-if="curComponent.type == 'BUTTON'"
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.textChinese"
                    />
                    <input
                      v-if="curComponent.type == 'TEXTVIEW'"
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.textValue"
                    />
                  </div>

                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>繁体中文</div>
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>文本内容</div>
                    <input
                      v-if="curComponent.type == 'BUTTON'"
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.textTraditional"
                    />
                    <input
                      v-if="curComponent.type == 'TEXTVIEW'"
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.traditionalTextValue"
                    />
                  </div>

                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>English</div>
                  </div>
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>文本内容</div>
                    <input
                      v-if="curComponent.type == 'BUTTON'"
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.textEnglish"
                    />
                    <input
                      v-if="curComponent.type == 'TEXTVIEW'"
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.englishTextValue"
                    />
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item title="样式设置">
                <div style="width: 100%; display: flex; flex-direction: column">
                  <div
                    v-if="curComponent.type == 'IMAGE'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>背景图片</div>
                    <div style="margin-left: 10px">
                      <div
                        v-if="
                          curComponent.type == 'IMAGE' &&
                          curComponent.src == null
                        "
                        @click="clickFilenputForImg"
                        style="
                          width: 200px;
                          border: solid 1px grey;
                          cursor: pointer;
                          height: 120px;
                          margin-right: 10px;
                        "
                      ></div>
                      <img
                        v-if="
                          curComponent.type == 'IMAGE' &&
                          curComponent.src != null
                        "
                        :src="
                          'http://' +
                          resourceIp +
                          ':8094/' +
                          (curComponent.src == null
                            ? require('../assets/empty.png')
                            : curComponent.src)
                        "
                        style="
                          width: 200px;
                          border: solid 1px grey;
                          cursor: pointer;
                          height: 120px;
                          margin-right: 10px;
                        "
                        alt=""
                        @click="clickFilenputForImg"
                      />
                      <input
                        style="display: none"
                        type="file"
                        id="fileInputForImg"
                        accept="image/*"
                        @change="uploadPhotoForImg"
                      />
                    </div>
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>轨道样式</div>
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>背景颜色</div>
                    <div style="margin-left: 10px">
                      <el-color-picker
                        v-model="curComponent.railBackground"
                      ></el-color-picker>
                    </div>
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>进度颜色</div>
                    <div style="margin-left: 10px">
                      <el-color-picker
                        v-model="curComponent.railProgressColor"
                      ></el-color-picker>
                    </div>
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>边框宽度</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.railBorderWidth"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>边框颜色</div>
                    <div style="margin-left: 10px">
                      <el-color-picker
                        v-model="curComponent.railBorderColor"
                      ></el-color-picker>
                    </div>
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>边框圆角</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.railBorderRoundCorner"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>滑块样式</div>
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>长度</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.sliderWidth"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>高度</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.sliderHeight"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>上边距</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.sliderMarginTop"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>下边距</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.sliderMarginBottom"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>左边距</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.sliderMarginLeft"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>右边距</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.sliderMarginRight"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>滑块背景颜色</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.sliderBackgroundColor"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>滑块边框圆角</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.sliderBorderRadius"
                    />
                  </div>

                  <div
                    v-if="curComponent.type == 'SLIDER'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>背景图片</div>
                    <div style="margin-left: 10px">
                      <div
                        v-if="
                          curComponent.type == 'SLIDER' &&
                          curComponent.sliderBackground == null
                        "
                        @click="clickFilenputForSlider"
                        style="
                          width: 200px;
                          border: solid 1px grey;
                          cursor: pointer;
                          height: 120px;
                          margin-right: 10px;
                        "
                      ></div>
                      <img
                        v-if="
                          curComponent.type == 'SLIDER' &&
                          curComponent.sliderBackground != null
                        "
                        :src="
                          'http://' +
                          resourceIp +
                          ':8094/' +
                          (curComponent.sliderBackground == null
                            ? require('../assets/empty.png')
                            : curComponent.sliderBackground)
                        "
                        style="
                          width: 200px;
                          border: solid 1px grey;
                          cursor: pointer;
                          height: 120px;
                          margin-right: 10px;
                        "
                        alt=""
                        @click="clickFilenputForSlider"
                      />
                      <input
                        style="display: none"
                        type="file"
                        id="fileInputForSlider"
                        accept="image/*"
                        @change="uploadPhotoForSlider"
                      />
                    </div>
                  </div>
                  <div
                    v-if="curComponent.type == 'BUTTON'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>背景颜色</div>
                    <div style="margin-left: 10px">
                      <el-color-picker
                        v-model="curComponent.backgroundColor"
                      ></el-color-picker>
                    </div>
                  </div>
                  <div
                    v-if="curComponent.type == 'BUTTON'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>背景图片</div>
                    <div style="margin-left: 10px">
                      <div
                        v-if="
                          curComponent.type == 'BUTTON' &&
                          curComponent.background == null
                        "
                        @click="clickFilenputForButton"
                        style="
                          width: 200px;
                          border: solid 1px grey;
                          cursor: pointer;
                          height: 120px;
                          margin-right: 10px;
                        "
                      ></div>
                      <img
                        v-if="
                          curComponent.type == 'BUTTON' &&
                          curComponent.background != null
                        "
                        :src="
                          'http://' +
                          resourceIp +
                          ':8094/' +
                          curComponent.background
                        "
                        style="
                          width: 200px;
                          border: solid 1px grey;
                          cursor: pointer;
                          height: 120px;
                          margin-right: 10px;
                        "
                        alt=""
                        @click="clickFilenputForButton"
                      />
                      <input
                        style="display: none"
                        type="file"
                        id="fileInputForButton"
                        accept="image/*"
                        @change="uploadPhotoForButton"
                      />
                    </div>
                  </div>
                  <div
                    v-if="curComponent.type == 'BUTTON'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div>边框圆角</div>
                    <input
                      style="margin-left: 10px; flex: 1"
                      v-model="curComponent.borderCorner"
                    />
                  </div>
                  <div
                    v-if="curComponent.type == 'SWITCH'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div style="width: 70px; text-align: left">激活颜色</div>
                    <div style="margin-left: 10px">
                      <el-color-picker
                        v-model="curComponent.activeColor"
                      ></el-color-picker>
                    </div>
                  </div>
                  <div
                    v-if="curComponent.type == 'SWITCH'"
                    style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      margin-bottom: 10px;
                    "
                  >
                    <div style="width: 70px; text-align: left">未激活颜色</div>
                    <div style="margin-left: 10px">
                      <el-color-picker
                        v-model="curComponent.unActiveColor"
                      ></el-color-picker>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
            <div style="width: 90%; display: flex; flex-direction:column;">
              <button style="margin-top:10px;" @click="saveAsFormat">保存为模板</button>

              <button style="margin-top:10px" @click="ExportComponentTemplate">导出模板</button>
              <button style="margin-top:10px" @click="copyCurComponent">复制</button>
              <button style="margin-top:10px" @click="delCurComponent">删除</button>
              <button style="margin-top:10px" @click="writeLogic">编写逻辑</button>
            </div>
          </div>

          <div
            v-if="
              curComponent == null && curComponentIndex == null && editMode == 1
            "
            style="
              border: solid 2px #0066a8;
              background: linear-gradient(to bottom, #0d3887, #0b1f4f);
              display: flex;
              flex-direction: column;
              align-items: center;

              overflow: auto;
              margin-left: 10px;
              flex: 1;
            "
            :style="{
              height: editRightBarHeight + 'px',
            }"
          >
            <div
              style="
                width: 95%;
                text-align: left;
                color: white;
                margin-top: 20px;
              "
            >
              工程属性
            </div>

            <input
              style="display: none"
              type="file"
              id="ImportComponentTemplateInput"
              @change="ImportComponentTemplate"
            />

            <button
              @click="clickImportComponentTemplate"
              style="width: 200px; margin-top: 10px"
            >
              导入组件模板
            </button>
            <button
              @click="outputComponentFormat"
              style="width: 200px; margin-top: 10px"
            >
              导出组件模板
            </button>
            <button style="width: 200px; margin-top: 10px">多语言属性</button>
            <button
              @click="addButtonGroupWin = true"
              style="width: 200px; margin-top: 10px"
            >
              按钮组合管理
            </button>
            <button
              @click="openAddAudioWin"
              style="width: 200px; margin-top: 10px"
            >
              语音指令
            </button>
          </div>
          <div
            v-if="
              curComponent == null && curComponentIndex != null && editMode == 1
            "
            style="
              border: solid 2px #0066a8;
              background: linear-gradient(to bottom, #0d3887, #0b1f4f);
              display: flex;
              flex-direction: column;
              align-items: center;

              overflow: auto;
              margin-left: 10px;
              flex: 1;
              color: white;
            "
            :style="{
              height: editRightBarHeight + 'px',
            }"
          >
            <div
              style="
                width: 95%;
                text-align: left;
                color: white;
                margin-top: 10px;
              "
            >
              页面属性
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                width: 95%;
                margin-top: 10px;
              "
            >
              <div>名称</div>
              <input type="text" v-model="pageName" style="margin-left: 10px" />
            </div>
            <div
              style="
                width: 95%;
                text-align: left;
                color: white;
                margin-top: 10px;
              "
            >
              页面尺寸
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                width: 95%;
                margin-top: 10px;
              "
            >
              <div>宽度</div>
              <input
                type="text"
                v-model="pageShapeInfo.pageShapeWidth"
                style="margin-left: 10px"
              />
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                width: 95%;
                margin-top: 10px;
              "
            >
              <div>高度</div>
              <input
                type="text"
                v-model="pageShapeInfo.pageShapeHeight"
                style="margin-left: 10px"
              />
            </div>
            <div
              style="
                width: 95%;
                text-align: left;
                color: white;
                margin-top: 10px;
              "
            >
              页面背景
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                width: 95%;
                margin-top: 10px;
              "
            >
              <div>填充</div>
              <el-color-picker
                style="margin-left: 10px"
                v-model="pageShapeInfo.pageBackgroundColor"
              ></el-color-picker>
              <div
                v-if="pageBackgroundImage == null"
                @click="clickFilenput"
                style="
                  width: 40px;
                  border: solid 1px grey;
                  cursor: pointer;
                  height: 40px;
                  margin: 10px 10px;
                  flex-shrink: 0;
                "
              ></div>
              <img
                v-if="pageBackgroundImage != null"
                style="
                  width: 40px;
                  border: solid 1px grey;
                  cursor: pointer;
                  height: 40px;
                  margin: 10px 10px;
                  flex-shrink: 0;
                "
                :src="'http://' + resourceIp + ':8094/' + pageBackgroundImage"
                alt=""
                @click="clickFilenput"
              />

              <input
                style="display: none"
                type="file"
                id="fileInput"
                accept="image/*"
                @change="uploadPhoto"
              />
            </div>
          </div>

          <div
            v-if="editMode == 2"
            style="
              border: solid 2px #0066a8;
              background: linear-gradient(to bottom, #0d3887, #0b1f4f);
              display: flex;
              flex-direction: column;
              align-items: center;

              overflow: auto;
              margin-left: 10px;
              flex: 1;
              color: white;
            "
            :style="{
              height: editRightBarHeight + 'px',
            }"
          >
            <div
              v-if="curX6Node != null && curX6Node.shape != 'IfElseComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">延时</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.delay"
                  @input="changeX6NodeValue($event, 'delay')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null && curX6Node.shape == 'PresetSettingComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">缓冲时间</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.bufferTime"
                  @input="changeX6NodeValue($event, 'bufferTime')"
                />
              </div>
            </div>

            <div
              v-if="curX6Node != null && curX6Node.shape == 'CMDComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">指令</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.instructionData"
                  @input="changeX6NodeValue($event, 'instructionData')"
                />
              </div>
            </div>
            <div
              v-if="curX6Node != null && curX6Node.shape == 'MessageComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">内容</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.instructionData"
                  @input="changeX6NodeValue($event, 'instructionData')"
                />
              </div>
            </div>
            <div
              v-if="curX6Node != null && curX6Node.shape == 'NetWorkComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">IP地址</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.ipAddress"
                  @input="changeX6NodeValue($event, 'ipAddress')"
                />
              </div>
            </div>
            <div
              v-if="curX6Node != null && curX6Node.shape == 'NetWorkComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">端口号</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.port"
                  @input="changeX6NodeValue($event, 'port')"
                />
              </div>
            </div>
            <div
              v-if="curX6Node != null && curX6Node.shape == 'NetWorkComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">指令数据</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.instructionData"
                  @input="changeX6NodeValue($event, 'instructionData')"
                />
              </div>
            </div>

            <div
              v-if="curX6Node != null && curX6Node.shape == 'NetWorkComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">通讯类型</div>
              <div class="logicInput">
                <select
                  style="width: 100%; margin: 0 5px"
                  v-model="curX6Node.myData.eventType"
                  @change="changeX6NodeValue($event, 'eventType')"
                >
                  <option
                    :value="index"
                    v-for="(item, index) in 3"
                    :key="index"
                  >
                    {{ instructionArr[index].type }}
                  </option>
                </select>
              </div>
            </div>

            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'NetWorkComponent' &&
                sonEventTypeArr != null &&
                sonEventTypeArr.length > 0
              "
              style="width: 95%; display: flex; align-items: center"
            >
              <div class="logicLabel" style="opacity: 0">通讯类型</div>
              <div class="logicInput">
                <select
                  style="width: 100%; margin: 0 5px"
                  v-model="curX6Node.myData.sonEventType"
                  @change="changeX6NodeValue($event, 'sonEventType')"
                >
                  <option
                    :value="index"
                    v-for="(item, index) in sonEventTypeArr"
                    :key="index"
                  >
                    {{ item }}
                  </option>
                  <!-- <option value="0">haha</option> -->
                </select>
              </div>
            </div>

            <div
              v-if="curX6Node != null && curX6Node.shape == 'NetWorkComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">16进制</div>
              <div class="logicInput">
                <el-checkbox
                  style="margin-left: 5px"
                  @input="changeX6NodeValueForCheckBox($event, 'hexadecimal')"
                  v-model="hexadecimal"
                ></el-checkbox>
              </div>
            </div>

            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'NetWorkComponent' &&
                curX6Node.myData.eventType == 2
              "
              style="width: 95%; display: flex; align-items: center"
            >
              <div>请求路径</div>
              <input
                type="text"
                v-model="curX6Node.myData.requestPath"
                @input="changeX6NodeValue($event, 'requestPath')"
              />
            </div>
            <div
              v-if="
                curX6Node != null &&
                (curX6Node.shape == 'VariableAssignmentComponent' ||
                  curX6Node.shape == 'PresetSettingComponent' ||
                  curX6Node.shape == 'VariableTriggerComponent')
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">变量名称</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.beChangedVariableName"
                  @input="changeX6NodeValue($event, 'beChangedVariableName')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'VariableTriggerComponent'
              "
              style="width: 95%; display: flex; flex-direction: column"
            >
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin-top: 5px;
                "
                v-for="(item, index) in curX6Node.myData.inputOutputArr"
                :key="index"
              >
                <div class="logicLabel" style="">
                  <input
                    type="text"
                    style="width: 100%; margin: 0 5px; background: #17479c"
                    v-model="item.inputValue"
                  />
                </div>
                <div class="logicInput">
                  <input
                    type="text"
                    v-model="item.outputValue"
                    @input="changeX6NodeValueforInputOutputArr()"
                  />
                </div>
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'VariableTriggerComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <button
                @click="addItemInInputOutArr"
                class="logicLabel"
                style="width: 150px"
              >
                添加输入输出组
              </button>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'VariableAssignmentComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">变量值</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.beChangedVariableValue"
                  @input="changeX6NodeValue($event, 'beChangedVariableValue')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null && curX6Node.shape == 'PresetSettingComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">初始值</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.initialValue"
                  @input="changeX6NodeValue($event, 'initialValue')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null && curX6Node.shape == 'PresetSettingComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">目标值</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.targetValue"
                  @input="changeX6NodeValue($event, 'targetValue')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ButtonCombinationComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">触发组合</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.triggerGroup"
                  @input="changeX6NodeValue($event, 'triggerGroup')"
                />
              </div>
            </div>
            <div
              v-if="curX6Node != null && curX6Node.shape == 'WakeComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">mac地址</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.instructionData"
                  @input="changeX6NodeValue($event, 'instructionData')"
                />
              </div>
            </div>
            <div
              v-if="curX6Node != null && curX6Node.shape == 'WakeComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">广播IP</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.ipAddress"
                  @input="changeX6NodeValue($event, 'ipAddress')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'SerialCommunicationComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">串口编号</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.serialNumber"
                  @input="changeX6NodeValue($event, 'serialNumber')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'SerialCommunicationComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">波特率</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.baudRate"
                  @input="changeX6NodeValue($event, 'baudRate')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'SerialCommunicationComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">数据位</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.dataBits"
                  @input="changeX6NodeValue($event, 'dataBits')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'SerialCommunicationComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">停止位</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.stopBits"
                  @input="changeX6NodeValue($event, 'stopBits')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'SerialCommunicationComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">校验位</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.parityBits"
                  @input="changeX6NodeValue($event, 'parityBits')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'SerialCommunicationComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">指令数据</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.instructionData"
                  @input="changeX6NodeValue($event, 'instructionData')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null && curX6Node.shape == 'AudioPlayBackComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">音频地址</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.audioFilePath"
                  @input="changeX6NodeValue($event, 'audioFilePath')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null && curX6Node.shape == 'AudioPlayBackComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <button class="logicLabel">上传音频</button>
            </div>
            <div
              v-if="curX6Node != null && curX6Node.shape == 'CodeComponent'"
              style="
                display: flex;
                flex-direction: column;
                width: 95%;
                margin-top: 5px;
              "
            >
              <prism-editor
                style="width: 90%"
                class="my-editor"
                v-model="code"
                :highlight="highlighter"
                :line-numbers="true"
              >
              </prism-editor>
            </div>
            <div
              v-if="curX6Node != null && curX6Node.shape == 'IfElseComponent'"
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">布尔表达式</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.instructionData"
                  @input="changeX6NodeValue($event, 'instructionData')"
                />
              </div>
            </div>

            <div
              style="
                width: 300px;
                height: 400px;
                display: flex;
                flex-direction: column;
              "
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentId != null
              "
            >
              <div style="width: 100%; text-align: left">源样式</div>
              <el-button
                v-if="curX6Node.myData.componentType == 'BUTTON'"
                :style="{
                  backgroundImage:
                    'url(' +
                    'http://' +
                    resourceIp +
                    ':8094/' +
                    buttonArr[curX6Node.myData.componentId].background +
                    ')',

                  fontSize:
                    buttonArr[curX6Node.myData.componentId].fontSize + 'px',
                  color: buttonArr[curX6Node.myData.componentId].fontColor,
                  borderRadius:
                    buttonArr[curX6Node.myData.componentId].borderCorner + 'px',
                  backgroundColor:
                    buttonArr[curX6Node.myData.componentId].backgroundColor ==
                      null ||
                    buttonArr[curX6Node.myData.componentId].backgroundColor ==
                      ''
                      ? 'transparent'
                      : buttonArr[curX6Node.myData.componentId].backgroundColor,
                }"
                style="
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: contain;
                  width: 100%;
                  flex: 1;
                  border: 0;
                "
                >{{
                  language == 0
                    ? buttonArr[curX6Node.myData.componentId].textChinese
                    : language == 1
                    ? buttonArr[curX6Node.myData.componentId].textTraditional
                    : buttonArr[curX6Node.myData.componentId].textEnglish
                }}</el-button
              >
              <van-switch
                v-if="curX6Node.myData.componentType == 'SWITCH'"
                :active-color="
                  switchArr[curX6Node.myData.componentId].activeColor == null
                    ? '#ee0a24'
                    : switchArr[curX6Node.myData.componentId].activeColor
                "
                :inactive-color="
                  switchArr[curX6Node.myData.componentId].unActiveColor == null
                    ? '#dcdee0'
                    : switchArr[curX6Node.myData.componentId].unActiveColor
                "
              />
              <van-slider
                :vertical="sliderArr[curX6Node.myData.componentId].vertical"
                v-if="curX6Node.myData.componentType == 'SLIDER'"
                :inactive-color="
                  sliderArr[curX6Node.myData.componentId].railBackground
                "
                :bar-height="
                  sliderArr[curX6Node.myData.componentId].vertical
                    ? sliderArr[curX6Node.myData.componentId].w + 'px'
                    : sliderArr[curX6Node.myData.componentId].h + 'px'
                "
                :active-color="
                  sliderArr[curX6Node.myData.componentId].railProgressColor
                "
                :style="{
                  border:
                    'solid ' +
                    sliderArr[curX6Node.myData.componentId].railBorderWidth +
                    'px ' +
                    sliderArr[curX6Node.myData.componentId].railBorderColor,
                  borderRadius:
                    sliderArr[curX6Node.myData.componentId]
                      .railBorderRoundCorner + 'px',
                }"
              >
                <template #button>
                  <img
                    v-if="
                      sliderArr[curX6Node.myData.componentId]
                        .sliderBackground != null
                    "
                    :src="
                      'http://' +
                      resourceIp +
                      ':8094/' +
                      sliderArr[curX6Node.myData.componentId].sliderBackground
                    "
                    :style="{
                      width:
                        sliderArr[curX6Node.myData.componentId].sliderWidth +
                        'px',
                      height:
                        sliderArr[curX6Node.myData.componentId].sliderHeight +
                        'px',
                      marginLeft:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderMarginLeft + 'px',
                      marginRight:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderMarginRight + 'px',
                      marginTop:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderMarginTop + 'px',
                      marginBottom:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderMarginBottom + 'px',
                    }"
                    draggable="false"
                  />
                  <div
                    v-if="
                      sliderArr[curX6Node.myData.componentId]
                        .sliderBackground == null
                    "
                    :style="{
                      width:
                        sliderArr[curX6Node.myData.componentId].sliderWidth +
                        'px',
                      height:
                        sliderArr[curX6Node.myData.componentId].sliderHeight +
                        'px',
                      marginLeft:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderMarginLeft + 'px',
                      marginRight:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderMarginRight + 'px',
                      marginTop:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderMarginTop + 'px',
                      marginBottom:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderMarginBottom + 'px',
                      backgroundColor:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderBackgroundColor,
                      borderRadius:
                        sliderArr[curX6Node.myData.componentId]
                          .sliderBorderRadius + 'px',
                    }"
                    draggable="false"
                  ></div>
                </template>
              </van-slider>
              <img
                v-if="curX6Node.myData.componentType == 'IMAGE'"
                :src="
                  'http://' +
                  resourceIp +
                  ':8094/' +
                  imgArr[curX6Node.myData.componentId].src
                "
                style="width: 80px; height: 50px"
                :style="{
                  transform:
                    'rotate(' +
                    imgArr[curX6Node.myData.componentId].rotate +
                    'deg)',
                }"
                alt=""
              />
              <textarea
                v-if="curX6Node.myData.componentType == 'TEXTVIEW'"
                v-model="
                  inputArr[curX6Node.myData.componentId][
                    language == '0'
                      ? 'textValue'
                      : language == '1'
                      ? 'traditionalTextValue'
                      : 'englishTextValue'
                  ]
                "
                style="
                  width: 90%;
                  height: 50%;
                  outline: 0;
                  border: 0;
                  background-color: transparent;
                "
                :style="{
                  fontSize:
                    inputArr[curX6Node.myData.componentId].fontSize + 'px',
                  color: inputArr[curX6Node.myData.componentId].fontColor,
                  transform:
                    'rotate(' +
                    inputArr[curX6Node.myData.componentId].rotate +
                    'deg)',
                }"
              ></textarea>
              <div style="width: 100%; text-align: left">目标样式</div>
              <el-button
                v-if="curX6Node.myData.componentType == 'BUTTON'"
                :style="{
                  backgroundImage:
                    'url(' +
                    'http://' +
                    resourceIp +
                    ':8094/' +
                    curX6Node.myData.background +
                    ')',

                  fontSize: curX6Node.myData.fontSize + 'px',
                  color: curX6Node.myData.fontColor,
                  borderRadius: curX6Node.myData.borderCorner + 'px',
                  backgroundColor:
                    curX6Node.myData.backgroundColor == null ||
                    curX6Node.myData.backgroundColor == ''
                      ? 'transparent'
                      : curX6Node.myData.backgroundColor,
                }"
                style="
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: contain;
                  width: 100%;
                  flex: 1;
                  border: 0;
                "
                >{{
                  language == 0
                    ? curX6Node.myData.textChinese
                    : language == 1
                    ? curX6Node.myData.textTraditional
                    : curX6Node.myData.textEnglish
                }}</el-button
              >
              <van-switch
                v-if="curX6Node.myData.componentType == 'SWITCH'"
                :active-color="
                  curX6Node.myData.activeColor == null
                    ? '#ee0a24'
                    : curX6Node.myData.activeColor
                "
                :inactive-color="
                  curX6Node.myData.unActiveColor == null
                    ? '#dcdee0'
                    : curX6Node.myData.unActiveColor
                "
              />
              <van-slider
                v-if="curX6Node.myData.componentType == 'SLIDER'"
                :vertical="curX6Node.myData.vertical"
                :inactive-color="curX6Node.myData.railBackground"
                :bar-height="
                  curX6Node.myData.vertical
                    ? curX6Node.myData.w + 'px'
                    : curX6Node.myData.h + 'px'
                "
                :active-color="curX6Node.myData.railProgressColor"
                :style="{
                  border:
                    'solid ' +
                    curX6Node.myData.railBorderWidth +
                    'px ' +
                    curX6Node.myData.railBorderColor,
                  borderRadius: curX6Node.myData.railBorderRoundCorner + 'px',
                }"
              >
                <template #button>
                  <img
                    v-if="curX6Node.myData.sliderBackground != null"
                    :src="
                      'http://' +
                      resourceIp +
                      ':8094/' +
                      curX6Node.myData.sliderBackground
                    "
                    :style="{
                      width: curX6Node.myData.sliderWidth + 'px',
                      height: curX6Node.myData.sliderHeight + 'px',
                      marginLeft: curX6Node.myData.sliderMarginLeft + 'px',
                      marginRight: curX6Node.myData.sliderMarginRight + 'px',
                      marginTop: curX6Node.myData.sliderMarginTop + 'px',
                      marginBottom: curX6Node.myData.sliderMarginBottom + 'px',
                    }"
                    draggable="false"
                  />
                  <div
                    v-if="curX6Node.myData.sliderBackground == null"
                    :style="{
                      width: curX6Node.myData.sliderWidth + 'px',
                      height: curX6Node.myData.sliderHeight + 'px',
                      marginLeft: curX6Node.myData.sliderMarginLeft + 'px',
                      marginRight: curX6Node.myData.sliderMarginRight + 'px',
                      marginTop: curX6Node.myData.sliderMarginTop + 'px',
                      marginBottom: curX6Node.myData.sliderMarginBottom + 'px',
                      backgroundColor: curX6Node.myData.sliderBackgroundColor,
                      borderRadius: curX6Node.myData.sliderBorderRadius + 'px',
                    }"
                    draggable="false"
                  ></div>
                </template>
              </van-slider>
              <img
                v-if="curX6Node.myData.componentType == 'IMAGE'"
                :src="'http://' + resourceIp + ':8094/' + curX6Node.myData.src"
                style="width: 80px; height: 50px"
                :style="{
                  transform: 'rotate(' + curX6Node.myData.rotate + 'deg)',
                }"
                alt=""
              />
              <textarea
                v-if="curX6Node.myData.componentType == 'TEXTVIEW'"
                v-model="
                  curX6Node.myData[
                    language == '0'
                      ? 'textValue'
                      : language == '1'
                      ? 'traditionalTextValue'
                      : 'englishTextValue'
                  ]
                "
                style="
                  width: 90%;
                  height: 50%;
                  outline: 0;
                  border: 0;
                  background-color: transparent;
                "
                :style="{
                  fontSize: curX6Node.myData.fontSize + 'px',
                  color: curX6Node.myData.fontColor,
                  transform: 'rotate(' + curX6Node.myData.rotate + 'deg)',
                }"
              ></textarea>
            </div>

            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">组件类型</div>
              <div class="logicInput">
                <select
                  @change="changeX6NodeValue($event, 'componentType')"
                  v-model="curX6Node.myData.componentType"
                >
                  <option value="BUTTON">按钮</option>
                  <option value="SWITCH">开关</option>
                  <option value="SLIDER">滑块</option>
                  <option value="IMAGE">图片</option>
                  <option value="TEXTVIEW">文本框</option>
                  <option value="VIDEO">流媒体</option>
                  <option value="WEBPAGE">网页</option>
                </select>
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                (curX6Node.shape == 'ComponentStyleComponent' ||
                  curX6Node.shape == 'ToggleSwitchComponent')
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">组件序号</div>
              <div class="logicInput">
                <select
                  @change="changeX6NodeValue($event, 'componentId')"
                  v-model="curX6Node.myData.componentId"
                >
                  <option
                    v-for="(item, index) in sonComponentIdArr"
                    :key="index"
                    :value="index"
                  >
                    {{ index }}
                  </option>
                </select>
              </div>
            </div>
            <div
              v-if="
                curX6Node != null && curX6Node.shape == 'ToggleSwitchComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">切换</div>
              <div class="logicInput">
                <select
                  @change="changeX6NodeValue($event, 'instructionData')"
                  v-model="curX6Node.myData.instructionData"
                >
                  <option value="0">取反</option>
                  <option value="1">强制关闭</option>
                  <option value="2">强制开启</option>
                </select>
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">顶部</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.y"
                  @input="changeX6NodeValue($event, 'y')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">左侧</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.x"
                  @input="changeX6NodeValue($event, 'x')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">宽度</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.w"
                  @input="changeX6NodeValue($event, 'w')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">高度</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.h"
                  @input="changeX6NodeValue($event, 'h')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">层级</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.z"
                  @input="changeX6NodeValue($event, 'z')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'BUTTON'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">字体大小</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.fontSize"
                  @input="changeX6NodeValue($event, 'fontSize')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'BUTTON'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">字体颜色</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.fontColor"
                  @input="changeX6NodeValue($event, 'fontColor')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'BUTTON'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">简体中文</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.textChinese"
                  @input="changeX6NodeValue($event, 'textChinese')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'BUTTON'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">繁体中文</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.textTraditional"
                  @input="changeX6NodeValue($event, 'textTraditional')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'BUTTON'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">English</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.textEnglish"
                  @input="changeX6NodeValue($event, 'textEnglish')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'BUTTON'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">背景颜色</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.backgroundColor"
                  @input="changeX6NodeValue($event, 'backgroundColor')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'BUTTON'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">背景图片</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.background"
                  @input="changeX6NodeValue($event, 'background')"
                />
              </div>
            </div>
            <!-- 开关 -->
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SWITCH'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">激活颜色</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.activeColor"
                  @input="changeX6NodeValue($event, 'activeColor')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SWITCH'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">未激活颜色</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.unActiveColor"
                  @input="changeX6NodeValue($event, 'unActiveColor')"
                />
              </div>
            </div>
            <!-- 开关end -->
            <!-- 滑块start -->
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">轨道样式</div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">背景颜色</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.railBackground"
                  @input="changeX6NodeValue($event, 'railBackground')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">进度颜色</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.railProgressColor"
                  @input="changeX6NodeValue($event, 'railProgressColor')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">边框宽度</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.railBorderWidth"
                  @input="changeX6NodeValue($event, 'railBorderWidth')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">边框颜色</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.railBorderColor"
                  @input="changeX6NodeValue($event, 'railBorderColor')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">边框圆角</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.railBorderRoundCorner"
                  @input="changeX6NodeValue($event, 'railBorderRoundCorner')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">滑块样式</div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">长度</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.sliderWidth"
                  @input="changeX6NodeValue($event, 'sliderWidth')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">高度</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.sliderHeight"
                  @input="changeX6NodeValue($event, 'sliderHeight')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">上边距</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.sliderMarginTop"
                  @input="changeX6NodeValue($event, 'sliderMarginTop')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">下边距</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.sliderMarginBottom"
                  @input="changeX6NodeValue($event, 'sliderMarginBottom')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">左边距</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.sliderMarginLeft"
                  @input="changeX6NodeValue($event, 'sliderMarginLeft')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">右边距</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.sliderMarginRight"
                  @input="changeX6NodeValue($event, 'sliderMarginRight')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'SLIDER'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">背景图片</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.sliderBackground"
                  @input="changeX6NodeValue($event, 'sliderBackground')"
                />
              </div>
            </div>
            <!-- 滑块end -->
            <!-- 图片 -->
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'IMAGE'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">背景图片</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.src"
                  @input="changeX6NodeValue($event, 'src')"
                />
              </div>
            </div>
            <!-- 图片end -->
            <!-- 文本框 -->
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'TEXTVIEW'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">字体颜色</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.fontColor"
                  @input="changeX6NodeValue($event, 'fontColor')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'TEXTVIEW'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">字体大小</div>
              <div class="logicInput">
                <input
                  type="text"
                  v-model="curX6Node.myData.fontSize"
                  @input="changeX6NodeValue($event, 'fontSize')"
                />
              </div>
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'TEXTVIEW'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">简体中文</div>
              <input
                type="text"
                v-model="curX6Node.myData.textValue"
                @input="changeX6NodeValue($event, 'textValue')"
              />
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'TEXTVIEW'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">繁体中文</div>
              <input
                type="text"
                v-model="curX6Node.myData.traditionalTextValue"
                @input="changeX6NodeValue($event, 'traditionalTextValue')"
              />
            </div>
            <div
              v-if="
                curX6Node != null &&
                curX6Node.shape == 'ComponentStyleComponent' &&
                curX6Node.myData.componentType == 'TEXTVIEW'
              "
              style="
                width: 95%;
                display: flex;
                align-items: center;
                margin-top: 5px;
              "
            >
              <div class="logicLabel">English</div>
              <input
                type="text"
                v-model="curX6Node.myData.englishTextValue"
                @input="changeX6NodeValue($event, 'englishTextValue')"
              />
            </div>
            <!-- 文本框end -->
          </div>
        </div>
      </div>
    </div>

  </div>
</template>


<script>
import eventBus from "../util/myEventBus";

import { Graph } from "@antv/x6";
import { register } from "@antv/x6-vue-shape";
import NetWorkComponent from "./LogicComponents/NetWorkComponent.vue";
import VariableAssignmentComponent from "./LogicComponents/VariableAssignment.vue";
import ButtonCombinationComponent from "./LogicComponents/ButtonCombination.vue";
import Vue from "vue";
import { Slider, Switch } from "vant";
import "vant/lib/slider/style";
import "vant/lib/switch/style";
import request from "../axios/request";
import html2canvas from "html2canvas";
import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";

import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { Clipboard } from "@antv/x6-plugin-clipboard";
import { Selection } from "@antv/x6-plugin-selection";
import SerialCommunicationComponent from "./LogicComponents/SerialCommunication.vue";
import AudioPlayBackComponent from "./LogicComponents/AudioPlayBackComponent.vue";
import CodeComponent from "./LogicComponents/CodeComponent.vue";
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism.css";
import WakeComponent from "./LogicComponents/WakeComponent.vue";
import IfElseComponent from "./LogicComponents/IfElseComponent.vue";
import ComponentStyleComponent from "./LogicComponents/ComponentStyleComponent.vue";
import CMDComponent from "./LogicComponents/CMDComponent.vue";
import MessageComponent from "./LogicComponents/MessageComponent.vue";
import * as THREE from "three";
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 引入dat.gui.js的一个类GUI
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { TransformControls } from "three/addons/controls/TransformControls.js";
import PresetSettingComponent from "./LogicComponents/PresetSettingComponent.vue";
import ToggleSwitchComponent from "./LogicComponents/ToggleSwitchComponent.vue";
import VariableTriggerComponent from "./LogicComponents/VariableTriggerComponent.vue";

register({
  shape: "VariableTriggerComponent",
  width: 350,
  height: 320,
  component: VariableTriggerComponent,
});

register({
  shape: "ToggleSwitchComponent",
  width: 350,
  height: 320,
  component: ToggleSwitchComponent,
});

register({
  shape: "PresetSettingComponent",
  width: 350,
  height: 320,
  component: PresetSettingComponent,
});

register({
  shape: "ComponentStyleComponent",
  width: 400,
  height: 450,
  component: ComponentStyleComponent,
});

register({
  shape: "WakeComponent",
  width: 300,
  height: 220,
  component: WakeComponent,
});

register({
  shape: "IfElseComponent",
  width: 250,
  height: 220,
  component: IfElseComponent,
});

register({
  shape: "SerialCommunicationComponent",
  width: 350,
  height: 310,
  component: SerialCommunicationComponent,
});

register({
  shape: "CodeComponent",
  width: 400,
  height: 100,
  component: CodeComponent,
});

register({
  shape: "NetWorkComponent",
  width: 350,
  height: 330,
  component: NetWorkComponent,
});

register({
  shape: "VariableAssignmentComponent",
  width: 250,
  height: 220,
  component: VariableAssignmentComponent,
});

register({
  shape: "CMDComponent",
  width: 250,
  height: 220,
  component: CMDComponent,
});

register({
  shape: "MessageComponent",
  width: 250,
  height: 220,
  component: MessageComponent,
});

register({
  shape: "ButtonCombinationComponent",
  width: 250,
  height: 220,
  component: ButtonCombinationComponent,
});

register({
  shape: "AudioPlayBackComponent",
  width: 250,
  height: 220,
  component: AudioPlayBackComponent,
});

export default {
  components: {
    [Slider.name]: Slider,
    [Switch.name]: Switch,
    PrismEditor,
  },
  computed: {
    rightBarX() {
      return window.innerWidth - 180;
    },
  },
  data() {
    return {
      openSourceList: null,
      sonResource: [],
      threeDResourceMap: new Map(),
      addingModulePath: null,
      logicNodeArr: new Set(),
      socket: null,
      imgData: null,
      showPreView: 0,
      code: null,
      hexadecimal: null,
      curX6Node: null,
      graph: null,
      editMode: 1,
      selectComponentId: null,
      selectLogicId: null,
      showButtonsList: true,
      showSwitchsList: true,
      showSlidersList: true,
      showImagesList: true,
      showTextViewsList: true,
      showPageComponents: true,
      showStreamsList: true,
      showWebPagesList: true,
      showVDRParams: {
        width: null,
        height: null,
        left: null,
        top: null,
      },

      prebuildComponentArr: [],
      logicComponentArr: [
        {
          name: "网络请求",
          shapeName: "NetWorkComponent",
          index: 0,
        },
        {
          name: "变量赋值",
          shapeName: "VariableAssignmentComponent",
          index: 0,
        },
        {
          name: "按钮组合",
          shapeName: "ButtonCombinationComponent",
          index: 0,
        },
        {
          name: "播放音频",
          shapeName: "AudioPlayBackComponent",
          index: 0,
        },
        {
          name: "串口通讯",
          shapeName: "SerialCommunicationComponent",
          index: 0,
        },
        {
          name: "代码块",
          shapeName: "CodeComponent",
          index: 0,
        },
        {
          name: "wake",
          shapeName: "WakeComponent",
          index: 0,
        },
        {
          name: "if-else",
          shapeName: "IfElseComponent",
          index: 0,
        },
        {
          name: "组件样式",
          shapeName: "ComponentStyleComponent",
          index: 0,
        },
        {
          name: "CMD",
          shapeName: "CMDComponent",
          index: 0,
        },
        {
          name: "消息弹窗",
          shapeName: "MessageComponent",
          index: 0,
        },
        {
          name: "预设设置",
          shapeName: "PresetSettingComponent",
          index: 0,
        },
        {
          name: "开关切换",
          shapeName: "ToggleSwitchComponent",
          index: 0,
        },
        {
          name: "变量触发",
          shapeName: "VariableTriggerComponent",
          index: 0,
        },
      ],
      pageShapeInfo: {
        pageShapeWidth: 800,
        pageShapeHeight: 400,
        pageShapeTop: 0,
        pageShapeLeft: 0,
        pageBackgroundColor: "white",
      },
      selectedComponent: 0,
      addingGroup: null,
      buttonGroupName: [],
      hideEditBar: false,
      curComponentIndex: null,
      instructionArr: [
        {
          type: "TCP",
          sonType: [],
        },
        {
          type: "UDP",
          sonType: ["单播", "组播", "广播"],
        },
        {
          type: "HTTP",
          sonType: ["GET", "POST"],
        },
        {
          type: "变量赋值",
          sonType: [],
        },
        {
          type: "按扭组合",
          sonType: [],
        },
        {
          type: "播放音频",
          sonType: [],
        },
        {
          type: "串口通讯",
          sonType: [],
        },
        {
          type: "信息发布",
          sonType: ["文本", "视频", "图片"],
        },
      ],
      audioList: [],
      selectAreaWidth: null,
      selectAreaHeight: null,
      sonInstructionArr: [],
      pageName: null,
      sonEventTypeArr: null,
      sonComponentIdArr: null,
      pageBackgroundImage: null,
      imgArr: [],
      switchArr: [],
      buttonArr: [],
      sliderArr: [],
      inputArr: [],
      videoArr: [],
      PPTArr: [],
      ThreeDArr: [],
      MeshArr: [],
      selectedMeshIndex: null,
      webPageArr: [],
      vLine: [],
      hLine: [],
      curComponent: null,
      pageId: null,
      highestZIndex: 1,
      language: 0,
      resourceIp: null,
      addButtonGroupWin: false,
      newButtonGroupName: null,
      tokenId: null,
      editBarWidth: null,
      editBarTop: null,
      editBarHeight: 500,

      addAudioCommandDialog: false,
      addAudioCommandForm: {
        commandName: null,
        commandAudio: null,
        audioCommandList: [],
      },
      activeNames: [],
      activeAttributes: [],
      addNewAudioWinshow: false,
      outsideAttribute: {
        headBarHeight: 100,
        sideWidth: 350,
        bottomHeight: 300,
      },
      editRightBarHeight: null,
    };
  },

  watch: {
    outsideAttribute: {
      handler(newV, oldV) {
        this.selectAreaWidth = window.innerWidth - 2 * newV.sideWidth;
      },
      deep: true,
    },
  },
  mounted() {
    // 计算outsideAttribute
    this.editBarWidth = window.innerWidth;
    this.editBarHeight = window.innerHeight * 0.5;
    this.editBarTop = window.innerHeight - this.editBarHeight;
    this.pageShapeInfo.pageShapeLeft =
      (window.innerWidth - this.pageShapeInfo.pageShapeWidth) / 2;
    this.pageShapeInfo.pageShapeTop = this.outsideAttribute.headBarHeight + 100;

    let editRightBar = document.getElementById("editRightBar");
    let showVDR = document.getElementById("showVDR");
    const resizeObserver = new ResizeObserver((entries) => {
      requestAnimationFrame(() => {
        for (const entry of entries) {
          this.selectAreaWidth = entry.contentRect.width;
          this.selectAreaHeight = entry.contentRect.height - 50;
          this.editRightBarHeight = editRightBar.getBoundingClientRect().height;
          this.showVDRParams.width = showVDR.offsetWidth;
          this.showVDRParams.height = showVDR.offsetHeight;
          this.showVDRParams.left = showVDR.offsetLeft;
          this.showVDRParams.top = showVDR.offsetTop;

          console.log(this.showVDRParams);
        }
      });
    });
    resizeObserver.observe(document.getElementById("selectArea"));

    this.resourceIp = this.extractIPFromURL(window.location.origin);
    this.pageName = this.$route.params.pageName;
    this.language = this.$route.params.language;
    if (this.pageName == "null") {
      this.pageName = null;
      return;
    }
    this.selectComponentType(0);
    this.getPageInfoByPageName();
    this.getAllComponent();
    this.connectWs();
    eventBus.$on("getPageInfoByPageName", this.getPageInfoByPageName);
    eventBus.$on("saveNewPageRequest", this.saveNewPageRequest);
  },
  beforeDestroy() {
    this.socket.send("disconnect#" + this.pageName + "#" + this.tokenId);
    this.socket.close();
    this.socket = null;
    eventBus.$off("getPageInfoByPageName");
    eventBus.$off("saveNewPageRequest");
  },
  methods: {
    changeX6NodeValueforInputOutputArr() {
      const dataSet = {};
      dataSet["inputOutputArr"] = this.curX6Node.myData.inputOutputArr;
      const itemNum = this.curX6Node.myData.inputOutputArr.length;
      const currentHeight = itemNum * 30;
      const node = this.graph.getCellById(this.curX6Node.id);
      const newHeight = currentHeight + 60 < 290 ? 290 : currentHeight + 60;
      console.log(newHeight);
      if (node) {
        node.resize(350, newHeight + 30);
        dataSet["currentHeight"] = newHeight;
      }
      this.curX6Node.updateData(dataSet);
      this.$forceUpdate();
    },
    addItemInInputOutArr() {
      this.curX6Node.myData.inputOutputArr.push({
        inputValue: 1,
        outputValue: 2,
      });
      this.changeX6NodeValueforInputOutputArr();
    },
    clone3DObject(index) {
      const obj = this.MeshArr[index].mesh;
      // 克隆对象
      const clonedObj = obj.clone();

      // 如果需要克隆材质，可以单独处理
      clonedObj.material = obj.material.clone();

      // 将克隆的对象添加到场景中
      this.curComponent.scene.add(clonedObj);

      // 将克隆的对象记录到 MeshArr 中
      this.MeshArr.push({
        name: "model" + this.MeshArr.length,
        source: this.MeshArr[index].source,
        mesh: clonedObj,
        sceneId: this.curComponentIndex,
      });
    },
    changeSonResources(key, index) {
      if (this.openSourceList == index) {
        this.sonResource = [];
        this.openSourceList = null;
        return;
      }
      const that = this;
      this.sonResource = [];
      this.openSourceList = index;
      const gltf = this.threeDResourceMap.get(key);
      gltf.scene.traverse(function (obj) {
        if (obj.isMesh) {
          that.sonResource.push(obj.name);
        }
      });
    },
    add3DObjectInScene(key, sonKey) {
      console.log("添加模型");
      const gltf = this.threeDResourceMap.get(key);
      const that = this;
      let finded = false;
      // this.curComponent.scene.add(gltf.scene);
      gltf.scene.traverse(function (obj) {
        console.log("遍历中");
        console.log("obj.name = " + obj.name + " , sonKey = " + sonKey);
        if (!finded && obj.isMesh && obj.name === sonKey) {
          console.log("准备添加");
          that.curComponent.scene.add(obj);
          console.log("添加成功");
          that.MeshArr.push({
            name: "model" + that.MeshArr.length,
            source: key,

            mesh: obj,
            sceneId: that.curComponentIndex,
          });
          finded = true;
        }
      });
    },
    changeOperationMode(index) {
      console.log(index);
      let transformControls =
        this.ThreeDArr[this.curComponentIndex].transformControls;
      switch (index) {
        case 0:
          transformControls.setMode("translate");
          break;
        case 1:
          transformControls.setMode("rotate");
          break;
        case 2:
          transformControls.setMode("scale");
          break;
        case 3:
          this.ThreeDArr[this.curComponentIndex].camera.setTarget(null);
          break;

        default:
          break;
      }
    },
    selectMesh(index) {
      let that = this;
      this.selectedMeshIndex = index;
      let curMesh = this.MeshArr[this.selectedMeshIndex].mesh;

      this.curComponent.controls.target.set(
        curMesh.position.x,
        curMesh.position.y,
        curMesh.position.z
      );

      this.curComponent.controls.update();

      this.curComponent.transformControls.attach(curMesh);
    },
    loadModule() {
      const that = this;
      if (this.threeDResourceMap.has(this.addingModulePath)) {
        return;
      }
      const loader = new GLTFLoader();
      loader.load(
        this.addingModulePath,
        function (gltf) {
          that.threeDResourceMap.set(that.addingModulePath, gltf);

          that.$forceUpdate();
        },
        function (xhr) {
          // 控制台查看加载进度xhr
          // 通过加载进度xhr可以控制前端进度条进度
          const percent = xhr.loaded / xhr.total;
          console.log("加载进度" + percent);
        }
      );
    },
    selectLogicComponent(cell) {
      this.graph.resetSelection();
      this.graph.select(cell);
      let node = this.graph.getCellById(cell);
      this.curX6Node = node;
      this.curX6Node.myData = JSON.parse(
        JSON.stringify(this.curX6Node.getData())
      );
      this.code = this.curX6Node.myData.instructionData;
      this.hexadecimal = this.curX6Node.myData.hexadecimal;
      this.selectLogicId = cell;
    },
    async ImportPageXmlTemplate(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/page/api/ImportPageXmlTemplate",
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          document.getElementById("ImportPageXml").value = "";
          this.cleanPage();

          this.pageBackgroundImage = res.data.data.pageInfo.pageBackgroundImage;
          this.pageShapeInfo.pageShapeWidth = res.data.data.pageInfo.pageWidth;
          this.pageShapeInfo.pageShapeHeight =
            res.data.data.pageInfo.pageHeight;
          this.pageShapeInfo.pageBackgroundColor =
            res.data.data.pageInfo.pageBackgroundColor;
          if (res.data.data.buttonList != null) {
            this.buttonArr = res.data.data.buttonList;
          }
          if (res.data.data.imageList != null) {
            this.imgArr = res.data.data.imageList;
          }

          if (res.data.data.sliders != null) {
            this.sliderArr = res.data.data.sliders;
          }

          if (res.data.data.tSwitches != null) {
            this.switchArr = res.data.data.tSwitches;
          }

          if (res.data.data.tTextViews != null) {
            this.inputArr = res.data.data.tTextViews;
          }
          if (res.data.data.tVideos != null) {
            this.videoArr = res.data.data.tVideos;
          }
          if (res.data.data.tPPTs != null) {
            this.PPTArr = res.data.data.tPPTs;
          }
          if (res.data.data.tWebPages != null) {
            this.webPageArr = res.data.data.tWebPages;
          }
          if (res.data.data.t3Ds != null) {
            this.ThreeDArr = res.data.data.t3Ds;
          }
        }
      }
    },
    async clickImportPageXml() {
      let ImportPageXml = document.getElementById("ImportPageXml");
      ImportPageXml.click();
    },
    async outputPage() {
      this.saveNewPage();
      let res = await request({
        url: "/page/api/outputPage?pageName=" + this.pageName,
        method: "POST",
        responseType: "blob",
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", this.pageName + ".xml"); // 或使用其他文件名
          document.body.appendChild(link);
          link.click();
          // 然后移除创建的元素
          document.body.removeChild(link);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    clickImportComponentTemplate() {
      let ImportComponentTemplateInput = document.getElementById(
        "ImportComponentTemplateInput"
      );
      ImportComponentTemplateInput.click();
    },
    async ImportComponentTemplate(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/prebuildComponent/api/ImportComponentTemplate",
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          document.getElementById("ImportComponentTemplateInput").value = "";
          this.selectComponentType(this.selectedComponent);
        }
      }
    },
    async deleteComponentFormat(id) {
      let res = await request({
        url: "/prebuildComponent/api/deleteComponentFormat/" + id,
        method: "DELETE",
      });
      if (res.data.status == 200) {
        this.selectComponentType(this.selectedComponent);
      }
    },
    async ExportComponentTemplate() {
      let xmlName = this.curComponent.name;

      let res = await request({
        url: "/prebuildComponent/api/ExportComponentTemplate",
        method: "POST",
        data: this.curComponent,
        responseType: "blob",
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", xmlName + ".xml"); // 或使用其他文件名
          document.body.appendChild(link);
          link.click();
          // 然后移除创建的元素
          document.body.removeChild(link);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    async saveAsFormat() {
      let res = await request({
        url: "/prebuildComponent/api/saveAsFormat",
        method: "POST",
        data: this.curComponent,
      });
      if (res.data.status == 200) {
        this.selectComponentType(this.selectedComponent);
      }
    },
    changeX6NodeValueForCheckBox(event, key) {
      const dataSet = {};

      dataSet[key] = this.hexadecimal;

      this.curX6Node.updateData(dataSet);
    },
    async outputComponentFormat() {
      this.saveNewPage();
      let res = await request({
        url: "",
      });
    },
    highlighter(code) {
      let res = highlight(code, languages.js);
      res = res.replace(/[\r\n]+/g, "<br/>");

      let lineArr = code.split("\n");

      // 如果匹配结果为 null，表示没有找到任何 <br/> 标签
      const lineNum = lineArr.length;
      const codeHeight = lineNum * 20;
      const node = this.graph.getCellById(this.curX6Node.id);
      const newHeight = 70 + codeHeight < 100 ? 100 : 70 + codeHeight;

      let maxWidth = 400;
      for (let index = 0; index < lineArr.length; index++) {
        const element = lineArr[index];

        maxWidth =
          maxWidth < element.length * 13 ? element.length * 13 : maxWidth;
      }

      const dataSet = {};
      if (node) {
        node.resize(maxWidth, newHeight);
        dataSet["codeHeight"] = newHeight;
        dataSet["codeWidth"] = maxWidth;
      } else {
        console.error("Node not found");
      }
      dataSet["instructionData"] = code;
      dataSet["code"] = res;
      this.curX6Node.updateData(dataSet);
      return res;
    },
    async saveLogicCanvas() {
      const graphData = this.graph.toJSON();
      this.curComponent.logicGraph = graphData;
      this.$message({
        type: "success",
        message: "逻辑控件保存成功",
      });
    },
    clearLogicCanvas() {
      this.graph.clearCells();
    },
    goBackMode() {
      this.graph.clearCells();
      this.editMode = 1;
      this.curX6Node = null;
    },
    changeX6NodeValue(event, key) {
      let value = event.target.value;
      const dataSet = {};
      dataSet[key] = value;
      if (key == "eventType") {
        this.sonEventTypeArr =
          this.instructionArr[this.curX6Node.myData.eventType].sonType;
      }

      if (key == "componentType") {
        const node = this.graph.getCellById(this.curX6Node.id);
        let newComponentHeight = 450;
        node.removePort("fontColor");
        node.removePort("fontSize");
        node.removePort("textChinese");
        node.removePort("textTraditional");
        node.removePort("textEnglish");
        node.removePort("backgroundColor");
        node.removePort("background");
        node.removePort("activeColor");
        node.removePort("unActiveColor");
        node.removePort("railBackground");
        node.removePort("railProgressColor");
        node.removePort("railBorderWidth");
        node.removePort("railBorderColor");
        node.removePort("railBorderRoundCorner");
        node.removePort("sliderWidth");
        node.removePort("sliderHeight");
        node.removePort("sliderMarginTop");
        node.removePort("sliderMarginBottom");
        node.removePort("sliderMarginLeft");
        node.removePort("sliderMarginRight");
        node.removePort("src");
        node.removePort("textValue");
        node.removePort("traditionalTextValue");
        node.removePort("englishTextValue");
        switch (value) {
          case "BUTTON":
            this.sonComponentIdArr = this.buttonArr.length;
            newComponentHeight = 700;
            node.addPort({
              group: "leftInput",
              id: "fontColor",
              args: {
                x: 0,
                y: 350,
              },
              attrs: {
                text: {
                  text: "字体颜色",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              id: "textChinese",
              group: "leftInput",
              args: {
                x: 0,
                y: 390,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "简体中文", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              id: "textTraditional",
              group: "leftInput",
              args: {
                x: 0,
                y: 430,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "繁体中文", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              id: "textEnglish",
              group: "leftInput",
              args: {
                x: 0,
                y: 470,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "english", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              id: "backgroundColor",
              group: "leftInput",
              args: {
                x: 0,
                y: 510,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "背景颜色", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              id: "background",
              group: "leftInput",
              args: {
                x: 0,
                y: 550,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "背景图片", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              id: "fontSize",
              group: "leftInput",
              args: {
                x: 0,
                y: 590,
              },
              attrs: {
                text: {
                  text: "字体大小",
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            break;
          case "SWITCH":
            this.sonComponentIdArr = this.switchArr.length;
            newComponentHeight = 500;
            node.addPort({
              group: "leftInput",
              id: "activeColor",
              args: {
                x: 0,
                y: 350,
              },
              attrs: {
                text: {
                  text: "激活颜色",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              id: "unActiveColor",
              group: "leftInput",
              args: {
                x: 0,
                y: 390,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "未激活颜色", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            break;
          case "SLIDER":
            this.sonComponentIdArr = this.sliderArr.length;
            newComponentHeight = 1000;
            node.addPort({
              group: "leftInput",
              id: "railBackground",
              args: {
                x: 0,
                y: 350,
              },
              attrs: {
                text: {
                  text: "背景颜色",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "railProgressColor",
              args: {
                x: 0,
                y: 390,
              },
              attrs: {
                text: {
                  text: "进度颜色",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "railBorderWidth",
              args: {
                x: 0,
                y: 430,
              },
              attrs: {
                text: {
                  text: "边框宽度",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "railBorderColor",
              args: {
                x: 0,
                y: 470,
              },
              attrs: {
                text: {
                  text: "边框颜色",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "railBorderRoundCorner",
              args: {
                x: 0,
                y: 510,
              },
              attrs: {
                text: {
                  text: "边框圆角",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "sliderWidth",
              args: {
                x: 0,
                y: 550,
              },
              attrs: {
                text: {
                  text: "滑块长度",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "sliderHeight",
              args: {
                x: 0,
                y: 590,
              },
              attrs: {
                text: {
                  text: "滑块高度",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "sliderMarginTop",
              args: {
                x: 0,
                y: 630,
              },
              attrs: {
                text: {
                  text: "上边距",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "sliderMarginBottom",
              args: {
                x: 0,
                y: 670,
              },
              attrs: {
                text: {
                  text: "下边距",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "sliderMarginLeft",
              args: {
                x: 0,
                y: 710,
              },
              attrs: {
                text: {
                  text: "左边距",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "sliderMarginRight",
              args: {
                x: 0,
                y: 750,
              },
              attrs: {
                text: {
                  text: "右边距",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "sliderBackground",
              args: {
                x: 0,
                y: 790,
              },
              attrs: {
                text: {
                  text: "背景图片",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            break;
          case "IMAGE":
            this.sonComponentIdArr = this.imgArr.length;
            node.addPort({
              group: "leftInput",
              id: "src",
              args: {
                x: 0,
                y: 350,
              },
              attrs: {
                text: {
                  text: "图片地址",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });

            break;
          case "TEXTVIEW":
            this.sonComponentIdArr = this.inputArr.length;
            newComponentHeight = 600;
            node.addPort({
              group: "leftInput",
              id: "fontColor",
              args: {
                x: 0,
                y: 350,
              },
              attrs: {
                text: {
                  text: "字体颜色",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "textValue",
              args: {
                x: 0,
                y: 390,
              },
              attrs: {
                text: {
                  text: "简体中文",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "traditionalTextValue",
              args: {
                x: 0,
                y: 430,
              },
              attrs: {
                text: {
                  text: "繁体中文",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "englishTextValue",
              args: {
                x: 0,
                y: 470,
              },
              attrs: {
                text: {
                  text: "English",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });
            node.addPort({
              group: "leftInput",
              id: "fontSize",
              args: {
                x: 0,
                y: 510,
              },
              attrs: {
                text: {
                  text: "字体大小",
                  fill: "#fff",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            });

            break;
          case "VIDEO":
            this.sonComponentIdArr = this.videoArr.length;
            break;
          case "WEBPAGE":
            this.sonComponentIdArr = this.webPageArr.length;
            break;
          case "PPT":
            this.sonComponentIdArr = this.PPTArr.length;
            break;
          case "3D":
            this.sonComponentIdArr = this.ThreeDArr.length;
            break;
          default:
            break;
        }
        dataSet["currentHeight"] = newComponentHeight;
        node.resize(400, newComponentHeight);
      }
      if (key == "componentId") {
        switch (this.curX6Node.myData.componentType) {
          case "BUTTON":
            Object.assign(this.curX6Node.myData, this.buttonArr[value]);
            Object.assign(dataSet, this.buttonArr[value]);
            break;
          case "SWITCH":
            Object.assign(this.curX6Node.myData, this.switchArr[value]);
            Object.assign(dataSet, this.switchArr[value]);
            break;
          case "SLIDER":
            Object.assign(this.curX6Node.myData, this.sliderArr[value]);
            Object.assign(dataSet, this.sliderArr[value]);
            break;
          case "IMAGE":
            Object.assign(this.curX6Node.myData, this.imgArr[value]);
            Object.assign(dataSet, this.imgArr[value]);
            break;
          case "TEXTVIEW":
            Object.assign(this.curX6Node.myData, this.inputArr[value]);
            Object.assign(dataSet, this.inputArr[value]);
            break;

          default:
            break;
        }
      }
      this.curX6Node.updateData(dataSet);
      this.$forceUpdate();
    },
    initLogicComponents() {},
    createLogicComponent(index) {
      let item = this.logicComponentArr[index];
      let name = item.shapeName;
      let portArr = [];
      let data = {};
      let id = null;
      switch (name) {
        case "NetWorkComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "ipAddress",
              group: "leftInput",
              args: {
                x: 0,
                y: 80,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "IP地址", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "port",
              group: "leftInput",
              args: {
                x: 0,
                y: 120,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "端口号", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "requestPath",
              group: "leftInput",
              args: {
                x: 0,
                y: 165,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "请求路径", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "instructionData",
              group: "leftInput",
              args: {
                x: 0,
                y: 210,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "指令数据", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "hexadecimal",
              group: "leftInput",
              args: {
                x: 0,
                y: 250,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "16进制", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "result",
              group: "rightOutput",
              args: {
                x: "100%",
                y: 80,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "结果", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "left",
                },
              },
            },
            {
              id: "nextStep",
              group: "bottomStep",

              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            ipAddress: null,
            port: null,
            instructionData: null,
            eventType: null,
            sonEventType: null,
            requestPath: null,
            hexadecimal: false,
          };
          break;
        case "VariableAssignmentComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "input",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "输入", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },

            {
              id: "output",
              group: "rightOutput",
              args: {
                x: "100%",
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "输出", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "left",
                },
              },
            },
            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            beChangedVariableName: null,
            beChangedVariableValue: null,
          };
          break;
        case "CMDComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "instructionData",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "指令", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            instructionData: null,
          };
          break;
        case "VariableTriggerComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "beChangedVariableName",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "变量名称", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "instructionData",
              group: "leftInput",
              args: {
                x: 0,
                y: 110,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "输入", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            beChangedVariableName: null,
            inputOutputArr: [],
            instructionData: null,
          };
          break;
        case "ToggleSwitchComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "instructionData",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "切换", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "componentId",
              group: "leftInput",
              args: {
                x: 0,
                y: 110,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "组件序号", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            componentId: null,
            instructionData: null,
          };
          break;
        case "PresetSettingComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "bufferTime",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "缓冲时间", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "beChangedVariableName",
              group: "leftInput",
              args: {
                x: 0,
                y: 110,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "变量名称", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "initialValue",
              group: "leftInput",
              args: {
                x: 0,
                y: 150,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "初始值", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "targetValue",
              group: "leftInput",
              args: {
                x: 0,
                y: 190,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "目标值", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            bufferTime: null,
            beChangedVariableName: null,
            initialValue: null,
            targetValue: null,
          };
          break;
        case "MessageComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "instructionData",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "消息", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            instructionData: null,
          };
          break;
        case "CodeComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            code: null,
            codeHeight: 100,
            codeWidth: 400,
            instructionData: null,
          };
          break;
        case "ButtonCombinationComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },

            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            triggerGroup: null,
          };
          break;
        case "WakeComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },

            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            instructionData: null,
            ipAddress: null,
          };
          break;
        case "SerialCommunicationComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "serialNumber",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "串口编号", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "baudRate",
              group: "leftInput",
              args: {
                x: 0,
                y: 110,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "波特率", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "dataBits",
              group: "leftInput",
              args: {
                x: 0,
                y: 150,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "数据位", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "stopBits",
              group: "leftInput",
              args: {
                x: 0,
                y: 190,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "停止位", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "parityBits",
              group: "leftInput",
              args: {
                x: 0,
                y: 230,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "校验位", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "instructionData",
              group: "leftInput",
              args: {
                x: 0,
                y: 270,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "指令数据", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "result",
              group: "rightOutput",
              args: {
                x: "100%",
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "结果", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "left",
                },
              },
            },
            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            serialNumber: null,
            baudRate: null,
            dataBits: null,
            stopBits: null,
            parityBits: null,
            instructionData: null,
          };
          break;
        case "AudioPlayBackComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "audioFilePath",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "音频地址", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },

            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            audioFilePath: null,
          };
          break;
        case "IfElseComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "instructionData",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "布尔表达式", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },

            {
              id: "true",
              group: "bottomStep",
              args: {
                x: "100%",
                y: "70%",
              },
              attrs: {
                circle: {
                  r: 10,
                  fill: "green",
                  stroke: "#096DD9",
                  magnet: true,
                },
                text: {
                  // 标签选择器
                  text: "TRUE", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "left",
                },
              },
            },
            {
              id: "false",
              group: "bottomStep",
              args: {
                x: "100%",
                y: "90%",
              },
              attrs: {
                circle: {
                  r: 10,
                  fill: "red",
                  stroke: "#096DD9",
                  magnet: true,
                },
                text: {
                  // 标签选择器
                  text: "FALSE", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "left",
                },
              },
            },
          ];
          data = {
            instructionData: null,
          };
          break;
        case "ComponentStyleComponent":
          portArr = [
            {
              id: "lastStep",
              group: "topStep",
              args: {
                x: 0,
                y: 30,
              },
            },
            {
              id: "componentType",
              group: "leftInput",
              args: {
                x: 0,
                y: 70,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "组件类型", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "componentId",
              group: "leftInput",
              args: {
                x: 0,
                y: 110,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "组件序号", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "y",
              group: "leftInput",
              args: {
                x: 0,
                y: 150,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "顶部", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "x",
              group: "leftInput",
              args: {
                x: 0,
                y: 190,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "左侧", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "w",
              group: "leftInput",
              args: {
                x: 0,
                y: 230,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "宽度", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "h",
              group: "leftInput",
              args: {
                x: 0,
                y: 270,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "高度", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },
            {
              id: "z",
              group: "leftInput",
              args: {
                x: 0,
                y: 310,
              },

              attrs: {
                text: {
                  // 标签选择器
                  text: "层级", // 标签文本
                  fill: "#FFF",
                },
              },
              label: {
                position: {
                  name: "right",
                },
              },
            },

            {
              id: "nextStep",
              group: "bottomStep",
              args: {
                x: "100%",
                y: 30,
              },
            },
          ];
          data = {
            delay: 0,
            componentType: null,
            componentId: null,
            y: null,
            x: null,
            w: null,
            h: null,
            z: null,
            fontColor: null,
            textChinese: null,
            textTraditional: null,
            textEnglish: null,
            backgroundColor: null,
            background: null,
            currentHeight: 450,
            activeColor: null,
            unActiveColor: null,
            railBackground: null,
            railProgressColor: null,
            railBorderWidth: null,
            railBorderColor: null,
            railBorderRoundCorner: null,
            sliderWidth: null,
            sliderHeight: null,
            sliderMarginTop: null,
            sliderMarginBottom: null,
            sliderMarginLeft: null,
            sliderMarginRight: null,
            src: null,
            textValue: null,
            traditionalTextValue: null,
            englishTextValue: null,
          };
          break;
        default:
          break;
      }
      this.graph.addNode({
        id: name + item.index,
        shape: name,
        x: 200,
        y: 50,
        ports: {
          items: portArr,
          groups: {
            topStep: {
              // anchor: "left",
              attrs: {
                circle: {
                  r: 10,
                  fill: "#5F95FF",
                  stroke: "#096DD9",
                  magnet: true,
                },
              },
              position: {
                name: "absolute",
              },
            },
            bottomStep: {
              // anchor: "right",
              attrs: {
                circle: {
                  r: 10,
                  fill: "#5F95FF",
                  stroke: "#096DD9",
                  magnet: true,
                },
              },
              position: {
                name: "absolute",
              },
            },
            leftInput: {
              attrs: {
                circle: {
                  r: 10,

                  stroke: "#A9DD1A",
                  magnet: true,
                },
              },
              // anchor: "left",
              position: {
                name: "absolute",
              },
            },
            rightOutput: {
              // anchor: "right",
              attrs: {
                circle: {
                  r: 10,

                  stroke: "#A9DD1A",
                  magnet: true,
                },
              },
              position: {
                name: "absolute",
              },
            },
          },
        },

        data: data,
      });
      this.logicNodeArr.add(name + item.index);
      console.log(this.logicNodeArr);
      item.index++;
      this.$forceUpdate();
    },

    initLogicCanvas() {
      this.logicNodeArr = new Set();
      let that = this;
      this.graph = new Graph({
        container: document.getElementById("logicCanvas"),
        background: {
          color: "#262626",
        },
        grid: {
          visible: true,
          type: "doubleMesh",
          args: [
            {
              color: "#171717", // 主网格线颜色
              thickness: 2, // 主网格线宽度
            },
            {
              color: "#2B2B2B", // 次网格线颜色
              thickness: 1, // 次网格线宽度
              factor: 4, // 主次网格线间隔
            },
          ],
        },
        panning: {
          enabled: true,
          eventTypes: ["rightMouseDown"],
        },
        mousewheel: true,
        connecting: {
          router: "manhattan",
          connector: {
            name: "jumpover",
            args: {
              radius: 8,
            },
          },
          // anchor:"midSide",
          connectionPoint: "anchor",
          allowBlank: false,
          snap: {
            radius: 20,
          },

          validateConnection({ targetMagnet }) {
            return !!targetMagnet;
          },
        },
      });
      this.graph
        .use(new Snapline())
        .use(new Keyboard({ enabled: true }))
        .use(
          new Selection({
            showNodeSelectionBox: true,
          })
        )
        .use(
          new Clipboard({
            enabled: true,
          })
        );

      // delete
      this.graph.bindKey("backspace", () => {
        const cells = this.graph.getSelectedCells();
        if (cells.length) {
          this.graph.removeCells(cells);
          console.log(cells);
          for (let index = 0; index < cells.length; index++) {
            const element = cells[index];
            this.logicNodeArr.delete(element.id);
          }
          this.$forceUpdate();
        }
      });
      this.graph.on("node:click", ({ cell }) => {
        let node = this.graph.getCellById(cell.id);
        this.curX6Node = node;
        this.curX6Node.myData = JSON.parse(
          JSON.stringify(this.curX6Node.getData())
        );
        this.code = this.curX6Node.myData.instructionData;
        this.hexadecimal = this.curX6Node.myData.hexadecimal;
        if (this.curX6Node.shape == "ToggleSwitchComponent") {
          this.sonComponentIdArr = this.switchArr.length;
        }
      });
      this.graph.bindKey("ctrl+c", () => {
        const cells = this.graph.getSelectedCells();
        if (cells.length) {
          this.graph.copy(cells);
        }
        return false;
      });

      this.graph.bindKey("ctrl+v", () => {
        if (!this.graph.isClipboardEmpty()) {
          const cells = this.graph.paste({ offset: 32 });
          this.graph.cleanSelection();
          this.graph.select(cells);
        }
        return false;
      });

      this.graph.on("edge:connected", ({ edge }) => {
        let targetNode = this.graph.getCellById(edge.target.cell);
        let sourceNode = edge.getSourceCell();
        if (targetNode === sourceNode) {
          this.graph.removeCell(edge);
          return;
        }

        sourceNode.myData = sourceNode.getData();
        let dataSet = {};
        if (edge.source.port == "output") {
          // 起始点为变量值
          if (edge.target.port != "input") {
            // 终点不是变量
            dataSet[edge.target.port] = sourceNode.myData.beChangedVariableName;
          } else {
            dataSet.beChangedVariableValue =
              sourceNode.myData.beChangedVariableName;
          }
        } else {
          if (
            edge.source.port == "nextStep" ||
            edge.source.port == "true" ||
            edge.source.port == "false"
          ) {
            // 起始点为返回结果
            if (
              edge.target.port == "input" ||
              edge.target.port == "output" ||
              edge.target.port == "nextStep"
            ) {
              this.graph.removeCell(edge);
            }
          } else {
            // 起始点为返回结果
            if (edge.target.port != "input") {
              // 终点不是变量
              this.graph.removeCell(edge);
            } else {
              dataSet.beChangedVariableValue = "result";
            }
          }
        }

        targetNode.setData(dataSet, { overwrite: false });
      });

      this.graph.on("edge:added", ({ edge }) => {
        let sourcePort = edge.source.port;

        let dash = "5";
        let lineColor = "#1287AF";
        switch (sourcePort) {
          case "nextStep":
            lineColor = "white";
            dash = null;

            break;
          case "true":
            lineColor = "green";
            dash = null;
            break;
          case "false":
            lineColor = "red";
            dash = null;
            break;

          default:
            break;
        }

        const attrs = {
          line: {
            stroke: lineColor,
            strokeDasharray: dash,
            strokeWidth: 5,
            targetMarker: {
              name: "block",
            },
            sourceMarker: null,
          },
        };

        edge.setAttrs(attrs);
      });
    },
    writeLogic() {
      if (this.editMode == 1) {
        this.getImg();
      }

      this.initLogicCanvas();
      this.editMode = 2;
      this.selectComponentType(0);
      if (this.curComponent.logicGraph != null) {
        this.graph.on("render:done", () => {
          const allNodes = this.graph.getNodes();
          for (let index = 0; index < allNodes.length; index++) {
            const element = allNodes[index];
            console.log(element.id);
            this.logicNodeArr.add(element.id);
            switch (element.shape) {
              case "NetWorkComponent":
                this.logicComponentArr[0].index++;
                break;
              case "VariableAssignmentComponent":
                this.logicComponentArr[1].index++;
                break;
              case "ButtonCombinationComponent":
                this.logicComponentArr[2].index++;
                break;
              case "SerialCommunicationComponent":
                this.logicComponentArr[4].index++;
                break;
              case "AudioPlayBackComponent":
                this.logicComponentArr[3].index++;
                break;
              case "CodeComponent":
                this.logicComponentArr[5].index++;
                break;
              case "WakeComponent":
                this.logicComponentArr[6].index++;
                break;
              case "IfElseComponent":
                this.logicComponentArr[7].index++;
                break;
              case "ComponentStyleComponent":
                this.logicComponentArr[8].index++;
                break;
              case "CMDComponent":
                this.logicComponentArr[9].index++;
                break;
              case "MessageComponent":
                this.logicComponentArr[10].index++;
                break;
              case "PresetSettingComponent":
                this.logicComponentArr[11].index++;
                break;
              case "ToggleSwitchComponent":
                this.logicComponentArr[12].index++;
                break;
              case "VariableTriggerComponent":
                this.logicComponentArr[13].index++;
                break;

              default:
                break;
            }
            if (element.data !== undefined) {
              let dataSet = JSON.parse(JSON.stringify(element.data));
              element.removeData();
              element.setData(dataSet);
            }
          }
          this.$forceUpdate();
        });
        this.graph.fromJSON(this.curComponent.logicGraph);

        return;
      }

      let targetType = this.curComponent.type;
      switch (targetType) {
        case "VIDEO":
          this.graph.addNode({
            id: "press",
            shape: "rect",
            x: 10,
            y: 70,
            width: 100,
            height: 40,
            label: "Press(按下)",
            ports: {
              items: [
                {
                  id: "nextStep",
                  group: "right",

                  label: {
                    position: {
                      name: "right",
                    },
                  },
                },
              ],
              groups: {
                right: {
                  position: "right",
                  attrs: {
                    circle: {
                      r: 10,
                      fill: "#5F95FF",
                      stroke: "#096DD9",
                      magnet: true,
                    },
                  },
                },
              },
            },
          });

          this.graph.addNode({
            id: "release",
            shape: "rect",
            x: 10,
            y: 130,
            width: 100,
            height: 40,
            label: "Release(释放)",
            ports: {
              items: [
                {
                  id: "nextStep",
                  group: "right",

                  label: {
                    position: {
                      name: "right",
                    },
                  },
                },
              ],
              groups: {
                right: {
                  position: "right",
                  attrs: {
                    circle: {
                      r: 10,
                      fill: "#5F95FF",
                      stroke: "#096DD9",
                      magnet: true,
                    },
                  },
                },
              },
            },
          });
          break;
        case "BUTTON":
          this.graph.addNode({
            id: "press",
            shape: "rect",
            x: 10,
            y: 70,
            width: 100,
            height: 40,
            label: "Press(按下)",
            ports: {
              items: [
                {
                  id: "nextStep",
                  group: "right",

                  label: {
                    position: {
                      name: "right",
                    },
                  },
                },
              ],
              groups: {
                right: {
                  position: "right",
                  attrs: {
                    circle: {
                      r: 10,
                      fill: "#5F95FF",
                      stroke: "#096DD9",
                      magnet: true,
                    },
                  },
                },
              },
            },
          });

          this.graph.addNode({
            id: "release",
            shape: "rect",
            x: 10,
            y: 130,
            width: 100,
            height: 40,
            label: "Release(释放)",
            ports: {
              items: [
                {
                  id: "nextStep",
                  group: "right",

                  label: {
                    position: {
                      name: "right",
                    },
                  },
                },
              ],
              groups: {
                right: {
                  position: "right",
                  attrs: {
                    circle: {
                      r: 10,
                      fill: "#5F95FF",
                      stroke: "#096DD9",
                      magnet: true,
                    },
                  },
                },
              },
            },
          });
          break;
        case "SWITCH":
          this.graph.addNode({
            id: "switch",
            shape: "rect",
            x: 10,
            y: 70,
            width: 100,
            height: 40,
            label: "Switch(切换)",
            ports: {
              items: [
                {
                  id: "nextStep",
                  group: "right",

                  label: {
                    position: {
                      name: "right",
                    },
                  },
                },
              ],
              groups: {
                right: {
                  position: "right",
                  attrs: {
                    circle: {
                      r: 10,
                      fill: "#5F95FF",
                      stroke: "#096DD9",
                      magnet: true,
                    },
                  },
                },
              },
            },
          });
          break;
        case "SLIDER":
          this.graph.addNode({
            id: "slide",
            shape: "rect",
            x: 10,
            y: 70,
            width: 100,
            height: 40,
            label: "Slide(滑动)",
            ports: {
              items: [
                {
                  id: "nextStep",
                  group: "right",
                  label: {
                    position: {
                      name: "right",
                    },
                  },
                },
              ],
              groups: {
                right: {
                  position: "right",
                  attrs: {
                    circle: {
                      r: 10,
                      fill: "#5F95FF",
                      stroke: "#096DD9",
                      magnet: true,
                    },
                  },
                },
              },
            },
          });
          break;
        default:
          break;
      }

      this.graph.addNode({
        id: "init",
        shape: "rect",
        x: 10,
        y: 10,
        width: 100,
        height: 40,
        label: "init(初始化)",
        ports: {
          items: [
            {
              id: "nextStep",
              group: "right",

              label: {
                position: {
                  name: "right",
                },
              },
            },
          ],
          groups: {
            right: {
              position: "right",
              attrs: {
                circle: {
                  r: 10,
                  fill: "#5F95FF",
                  stroke: "#096DD9",
                  magnet: true,
                },
              },
            },
          },
        },
      });
    },
    selectPage() {
      const elementId = event.target.id;

      if (elementId != "pageBox") {
        return;
      }
      this.curComponent = null;
      this.curComponentIndex = -1;
    },
    rightClick(event, item, index) {
      this.curComponent = item;
      this.curComponentIndex = index;
      this.showPosition = {
        y: event.y,
        x: event.x,
      };
      this.showContextMenu = true;
    },
    onActivated(id) {},
    clickComponentByList(arr, index) {
      this.selectComponentId = arr[index].type + index;
      this.curComponent = arr[index];
      this.curComponentIndex = index;
      if (this.editMode == 2) {
        this.writeLogic();
      }
    },
    clearCurComponent(event) {
      const elementId = event.target.id;
      console.log(elementId);
      if (elementId != "canvas") {
        return;
      }

      this.curComponent = null;
      this.curComponentIndex = null;
    },
    createComponent(index) {
      let type = this.prebuildComponentArr[index].type;
      this.prebuildComponentArr[index].z = this.highestZIndex++;
      switch (type) {
        case "BUTTON":
          this.createButton(index);
          break;
        case "SWITCH":
          this.createSwitch(index);
          break;
        case "SLIDER":
          this.createSlider(index);
          break;
        case "IMAGE":
          this.createImg(index);
          break;
        case "TEXTVIEW":
          this.createTextView(index);
          break;
        case "WEBPAGE":
          this.createWebPage(index);
          break;
        case "VIDEO":
          this.createVideo(index);
          break;
        case "PPT":
          this.createPPT(index);
          break;
        case "3D":
          this.create3D(index);
          break;
      }
    },
    async selectComponentType(index) {
      this.selectedComponent = index;
      if (this.editMode == 1) {
        let res = await request({
          url: "/prebuildComponent/api/getPrebuildComponentByType/" + index,
          method: "GET",
        });
        if (res.data.status == 200) {
          this.prebuildComponentArr = res.data.data;
        }
      }
    },
    saveNewAudio() {
      this.audioList.push(this.addAudioCommandForm);
      this.addNewAudioWinshow = false;
    },
    handleChange(val) {
      if (val != null && val != "") {
        this.addAudioCommandForm = this.audioList[Number(val) - 1];
        this.addNewAudioWinshow = false;
        if (
          this.addAudioCommandForm.audioCommandList != null &&
          this.addAudioCommandForm.audioCommandList.length > 0
        ) {
          for (
            let index = 0;
            index < this.addAudioCommandForm.audioCommandList.length;
            index++
          ) {
            const element = this.addAudioCommandForm.audioCommandList[index];

            if (element.eventType != null) {
              element.sonInstructionArr =
                this.instructionArr[element.eventType].sonType;
            }
          }
        }
      } else {
      }
    },
    openAddAudioWin() {
      this.addAudioCommandDialog = true;
      this.addAudioCommandForm = {
        commandName: null,
        commandAudio: null,
        audioCommandList: [],
      };
    },

    delAudioCommand(index) {
      this.audioList.splice(index, 1);
    },
    onResizeEditCallback(handle, x, y, width, height) {
      this.editBarTop = y;
      this.editBarHeight = height;
    },
    goOtherPage(path) {
      this.$router.push(path);
    },

    jumpToUrl(url) {
      window.location.href = "http://" + this.resourceIp + ":8094/" + url;
    },
    async uploadAudioFile(event, index, commandType) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent[commandType + "CommandList"][index].audioFilePath =
            res.data.data;
          event.target.value = "";
        }
      }
    },
    async uploadVideoFile(event, index, commandType) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent[commandType + "CommandList"][index].videoFilePath =
            res.data.data;
          event.target.value = "";
        }
      }
    },
    async uploadImageFile(event, index, commandType) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent[commandType + "CommandList"][index].imageFilePath =
            res.data.data;
          event.target.value = "";
        }
      }
    },
    UploadImage(index, id) {
      document.getElementById(id + index).click();
    },
    UploadAudio(index, id) {
      document.getElementById(id + index).click();
    },
    UploadVideo(index, id) {
      document.getElementById(id + index).click();
    },
    delAddedGroup(index) {
      this.curComponent.addedButtonGroupArr.splice(index, 1);
    },
    addedToButtonGroupArr() {
      if (!this.curComponent.addedButtonGroupArr.includes(this.addingGroup)) {
        this.curComponent.addedButtonGroupArr.push(this.addingGroup);
      }
      this.addingGroup = null;
    },
    addButtonGroup() {
      this.buttonGroupName.push(this.newButtonGroupName);
      this.newButtonGroupName = null;
    },
    extractIPFromURL(url) {
      // 定义正则表达式来匹配IP地址
      const ipRegex = /(?:\d{1,3}\.){3}\d{1,3}/;

      // 使用正则表达式查找匹配项
      const match = url.match(ipRegex);

      // 返回匹配到的IP地址（如果有的话）
      return match ? match[0] : null;
    },
    delCommand(item, commandListName, index) {
      this.curComponent[commandListName].splice(index, 1);
    },
    addInitEvent() {
      if (
        this.curComponent.initCommandList == null ||
        this.curComponent.initCommandList == undefined
      ) {
        Vue.set(this.curComponent, "initCommandList", []);
      }
      this.curComponent.initCommandList.push({
        eventType: null,
        sonEventType: null,
        ipAddress: null,
        port: null,
        instructionData: null,
        inputValueArr: [],
        getReturn: null,
        returnFormat: null,
        returnValueArr: [],
        delay: null,
        audioFilePath: null,
      });
    },
    addSwitchEvent() {
      if (
        this.curComponent.switchCommandList == null ||
        this.curComponent.switchCommandList == undefined
      ) {
        Vue.set(this.curComponent, "switchCommandList", []);
      }
      this.curComponent.switchCommandList.push({
        eventType: null,
        sonEventType: null,
        ipAddress: null,
        port: null,
        instructionData: null,
        inputValueArr: [],
        getReturn: null,
        returnFormat: null,
        returnValueArr: [],
        delay: null,
        audioFilePath: null,
      });
    },
    addSliderEvent() {
      if (
        this.curComponent.slideCommandList == null ||
        this.curComponent.slideCommandList == undefined
      ) {
        Vue.set(this.curComponent, "slideCommandList", []);
      }
      this.curComponent.slideCommandList.push({
        eventType: null,
        sonEventType: null,
        ipAddress: null,
        port: null,
        instructionData: null,
        inputValueArr: [],
        getReturn: null,
        returnFormat: null,
        returnValueArr: [],
        delay: null,
        audioFilePath: null,
      });
    },
    addClickEvent() {
      if (
        this.curComponent.clickCommandList == null ||
        this.curComponent.clickCommandList == undefined
      ) {
        Vue.set(this.curComponent, "clickCommandList", []);
      }
      this.curComponent.clickCommandList.push({
        eventType: null,
        instructionData: null,
        ipAddress: null,
        port: null,
        getReturn: false,
        returnFormat: null,
        returnValueArr: [],
        sonEventType: null,
        delay: null,
        audioFilePath: null,
        videoFilePath: null,
        imageFilePath: null,
      });
    },
    cleanPage() {
      this.curComponentIndex = null;
      this.pageBackgroundImage = null;

      this.imgArr = [];
      this.switchArr = [];
      this.buttonArr = [];
      this.sliderArr = [];
      this.inputArr = [];
      this.videoArr = [];
      this.PPTArr = [];
      this.ThreeDArr = [];
      this.curComponent = null;
      this.highestZIndex = 0;
    },

    countQuestionMarksForInput(item) {
      if (item.instructionData == null) {
        return;
      }

      this.$set(item, "inputValueArr", []);
      let index = 0;
      while (index !== -1) {
        index = item.instructionData.indexOf("?", index);
        if (index !== -1) {
          index++;
          item.inputValueArr.push({
            valueName: "",
          });
        }
      }
    },
    countQuestionMarksForChangeVariableValue(item) {
      if (item.beChangedVariableValue == null) {
        return;
      }

      this.$set(item, "inputValueArr", []);
      let index = 0;
      while (index !== -1) {
        index = item.beChangedVariableValue.indexOf("?", index);
        if (index !== -1) {
          index++;
          item.inputValueArr.push({
            valueName: "",
          });
        }
      }
    },
    countQuestionMarks(item) {
      if (item.returnFormat == null) {
        return;
      }
      item.returnValueArr = [];
      let index = 0;
      while (index !== -1) {
        index = item.returnFormat.indexOf("?", index); // 从当前index开始查找下一个问号
        if (index !== -1) {
          index++; // 移动到下一个字符的位置，继续查找
          item.returnValueArr.push({
            valueName: "",
          });
        }
      }
    },
    addAudioCommand() {
      this.addNewAudioWinshow = true;
      this.activeNames = [];
      this.addAudioCommandForm = {
        commandName: null,
        commandAudio: null,
        audioCommandList: [],
      };
    },
    async getAllComponent() {
      let res = await request({
        url:
          "/page/api/getAllComponentByPageName/" +
          this.pageName +
          "/" +
          this.pageShapeInfo.pageShapeWidth +
          "/" +
          this.pageShapeInfo.pageShapeHeight +
          "/false",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.buttonArr.push(...res.data.data.buttonList);
        this.sliderArr.push(...res.data.data.sliderList);
        this.inputArr.push(...res.data.data.textViewList);
        this.switchArr.push(...res.data.data.switchList);
        this.imgArr.push(...res.data.data.imageList);
        this.videoArr.push(...res.data.data.videoList);
        this.PPTArr.push(...res.data.data.pptList);
        // this.ThreeDArr.push(...res.data.data.ThreeDList);
        this.webPageArr.push(...res.data.data.webPageList);
      }
    },
    async getPageInfoByPageName() {
      this.$store.state.lastMethod = "getPageInfoByPageName";
      this.$store.state.lastData = null;
      let res = await request({
        url: "/page/api/getPageInfoByPageName/" + this.pageName,
        method: "GET",
      });
      if (res.data.status == 200) {
        this.pageId = res.data.data.id;
        this.pageName = res.data.data.pageName;
        this.pageBackgroundImage = res.data.data.pageBackgroundImage;
        this.highestZIndex = res.data.data.highestZIndex;
        this.buttonGroupName = res.data.data.buttonGroupName;
        this.audioList = res.data.data.audioList;
      }
    },
    saveNewPage() {
      this.getImg();
    },
    async saveNewPageRequest() {
      this.$store.state.lastMethod = "saveNewPageRequest";
      this.$store.state.lastData = null;
      let res = null;
      if (this.pageId == null) {
        res = await request({
          url: "/page/api/saveNewPage",
          method: "POST",
          data: {
            pageName: this.pageName,
            pageBackgroundImage: this.pageBackgroundImage,
            pageWidth: this.pageShapeInfo.pageShapeWidth,
            pageHeight: this.pageShapeInfo.pageShapeHeight,
            pageBackgroundColor: this.pageShapeInfo.pageBackgroundColor,
            highestZIndex: this.highestZIndex,
            buttonGroupName: this.buttonGroupName,
            audioList: this.audioList,
            pageImg: this.imgData,
          },
        });
      } else {
        res = await request({
          url: "/page/api/updatePage",
          method: "POST",
          data: {
            id: this.pageId,
            pageName: this.pageName,
            pageBackgroundImage: this.pageBackgroundImage,
            pageWidth: this.pageShapeInfo.pageShapeWidth,
            pageHeight: this.pageShapeInfo.pageShapeHeight,
            pageBackgroundColor: this.pageShapeInfo.pageBackgroundColor,
            highestZIndex: this.highestZIndex,
            buttonGroupName: this.buttonGroupName,
            audioList: this.audioList,
            pageImg: this.imgData,
          },
        });
      }
      if (res.data.status == 200) {
        this.pageId = res.data.data;
        this.saveAllComponents();
      }
    },
    addCommandInAudioCommand() {
      this.addAudioCommandForm.audioCommandList.push({
        eventType: null,
        sonInstructionArr: null,
        type: "AUDIO",
        sonEventType: null,
        ipAddress: null,
        port: null,
        serialNumber: null,
        baudRate: null,
        dataBits: null,
        stopBits: null,
        parityBits: null,
        beChangedVariableName: null,
        beChangedVariableValue: null,
        instructionData: null,
        inputValueArr: [],
        getReturn: false,
        returnFormat: null,
        returnValueArr: [],
      });
    },
    async saveAllComponents() {
      let threeDMeshList = [];
      if (this.MeshArr.length > 0) {
        for (let index = 0; index < this.MeshArr.length; index++) {
          const element = this.MeshArr[index];
          threeDMeshList.push({
            sourcePath: element.source,
            positionX: element.mesh.position.x,
            positionY: element.mesh.position.y,
            positionZ: element.mesh.position.z,
            scalingX: element.mesh.scale.x,
            scalingY: element.mesh.scale.y,
            scalingZ: element.mesh.scale.z,
            rotationX: element.mesh.quaternion.x,
            rotationY: element.mesh.quaternion.y,
            rotationZ: element.mesh.quaternion.z,

            name: element.mesh.name,
            sceneIndex: element.sceneId,
          });
        }
      }
      let threeDSceneList = [];
      if (this.ThreeDArr.length > 0) {
        for (let index = 0; index < this.ThreeDArr.length; index++) {
          const element = this.ThreeDArr[index];
          threeDSceneList.push({
            sceneIndex: index,
            w: element.w,
            h: element.h,
            x: element.x,
            y: element.y,
            z: element.z,
            displayVariableName: element.displayVariableName,
            displayVariableValue: element.displayVariableValue,
            conditionShow: element.conditionShow,
          });
        }
      }
      let res = await request({
        url:
          "/page/api/saveAllComponents/" +
          this.pageId +
          "/" +
          this.tokenId +
          "/true",
        method: "POST",
        data: {
          buttonList: this.buttonArr,
          switchList: this.switchArr,
          sliderList: this.sliderArr,
          imageList: this.imgArr,
          textList: this.inputArr,
          videoList: this.videoArr,
          pptList: this.PPTArr,
          threeDMeshList: threeDMeshList,
          threeDSceneList: threeDSceneList,
          webPageList: this.webPageArr,
        },
      });
    },
    //截图方法
    getImg() {
      if (this.editMode == 2) {
        console.log("当前模式不支持截图");
        this.saveNewPageRequest();
        return;
      }
      let targetPage = document.getElementById("pageBox");
      console.log("showPreView:" + this.showPreView);
      html2canvas(targetPage, {
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
        ignoreElements: (element) => {
          if (
            element.id === "editBar" ||
            element.id === "hideEditBar" ||
            element.id === "showEditBar"
          )
            return true;
        },
      }).then((canvas) => {
        //截图用img元素承装，显示在页面的上
        this.imgData = canvas.toDataURL("image/jpeg"); // toDataURL :图片格式转成 base64

        this.saveNewPageRequest();
      });
    },
    async updateImgOfPage(imgData) {
      await request({
        url: "/page/api/updatePageImg",
        method: "POST",
        data: {
          imgData: imgData,
          pageId: this.pageId,
        },
      });
    },
    delCurComponent() {
      switch (this.curComponent.type) {
        case "BUTTON":
          this.buttonArr.splice(this.curComponentIndex, 1);
          break;
        case "IMAGE":
          this.imgArr.splice(this.curComponentIndex, 1);
          break;
        case "SWITCH":
          this.switchArr.splice(this.curComponentIndex, 1);
          break;
        case "SLIDER":
          this.sliderArr.splice(this.curComponentIndex, 1);
          break;
        case "TEXTVIEW":
          this.inputArr.splice(this.curComponentIndex, 1);
          break;
        case "VIDEO":
          this.videoArr.splice(this.curComponentIndex, 1);
          break;
        case "WEBPAGE":
          this.webPageArr.splice(this.curComponentIndex, 1);
          break;
        case "PPT":
          this.PPTArr.splice(this.curComponentIndex, 1);
          break;
        case "3D":
          this.ThreeDArr.splice(this.curComponentIndex, 1);
          break;
        default:
          break;
      }
      // this.curComponent = null;
      this.curComponentIndex = -1;
    },
    async copyCurComponent() {
      let copy = JSON.parse(JSON.stringify(this.curComponent));
      switch (this.curComponent.type) {
        case "BUTTON":
          this.buttonArr.push(copy);
          break;
        case "IMAGE":
          this.imgArr.push(copy);
          break;
        case "SLIDER":
          this.sliderArr.push(copy);
          break;
        case "TEXTVIEW":
          this.inputArr.push(copy);
          break;
        case "VIDEO":
          this.videoArr.push(copy);
          break;
        case "WEBPAGE":
          this.webPageArr.push(copy);
          break;
        case "SWITCH":
          this.switchArr.push(copy);
          break;
        case "PPT":
          this.PPTArr.push(copy);
          break;
        case "3D":
          this.ThreeDArr.push(copy);
          break;
        default:
          break;
      }
    },

    changeEventType(item) {
      if (item.eventType == "4" && item.type != "AUDIO") {
        this.curComponent.addedButtonGroupArr = [];
      }
      item.sonInstructionArr = this.instructionArr[item.eventType].sonType;
    },
    async uploadPhotoForSlider(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent.sliderBackground = res.data.data;
          event.target.value = "";
        }
      }
    },
    async uploadPhotoForImg(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent.src = res.data.data;
          event.target.value = "";
        }
      }
    },
    async uploadPhotoForButton(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.curComponent.background = res.data.data;
          event.target.value = "";
        }
      }
    },
    clickFilenputForSlider() {
      let fileInputForSlider = document.getElementById("fileInputForSlider");
      fileInputForSlider.click();
    },
    clickFilenputForImg() {
      let fileInputForImg = document.getElementById("fileInputForImg");
      fileInputForImg.click();
    },
    clickFilenputForButton() {
      let fileInputForButton = document.getElementById("fileInputForButton");
      fileInputForButton.click();
    },
    onPageResizeCallback(handle, x, y, width, height) {
      console.log("页面尺寸发生变化");
      for (let index = 0; index < this.buttonArr.length; index++) {
        const element = this.buttonArr[index];
        element.w = (element.w / this.pageShapeInfo.pageShapeWidth) * width;
        element.h = (element.h / this.pageShapeInfo.pageShapeHeight) * height;
        element.x = (element.x / this.pageShapeInfo.pageShapeWidth) * width;
        element.y = (element.y / this.pageShapeInfo.pageShapeHeight) * height;
      }
      for (let index = 0; index < this.imgArr.length; index++) {
        const element = this.imgArr[index];
        element.w = (element.w / this.pageShapeInfo.pageShapeWidth) * width;
        element.h = (element.h / this.pageShapeInfo.pageShapeHeight) * height;
        element.x = (element.x / this.pageShapeInfo.pageShapeWidth) * width;
        element.y = (element.y / this.pageShapeInfo.pageShapeHeight) * height;
      }
      for (let index = 0; index < this.sliderArr.length; index++) {
        const element = this.sliderArr[index];
        element.w = (element.w / this.pageShapeInfo.pageShapeWidth) * width;
        element.h = (element.h / this.pageShapeInfo.pageShapeHeight) * height;
        element.x = (element.x / this.pageShapeInfo.pageShapeWidth) * width;
        element.y = (element.y / this.pageShapeInfo.pageShapeHeight) * height;
      }
      for (let index = 0; index < this.switchArr.length; index++) {
        const element = this.switchArr[index];
        element.h = (element.h / this.pageShapeInfo.pageShapeHeight) * height;
        element.w = element.h * 2;
        element.x = (element.x / this.pageShapeInfo.pageShapeWidth) * width;
        element.y = (element.y / this.pageShapeInfo.pageShapeHeight) * height;
      }
      for (let index = 0; index < this.inputArr.length; index++) {
        const element = this.inputArr[index];
        element.w = (element.w / this.pageShapeInfo.pageShapeWidth) * width;
        element.h = (element.h / this.pageShapeInfo.pageShapeHeight) * height;
        element.x = (element.x / this.pageShapeInfo.pageShapeWidth) * width;
        element.y = (element.y / this.pageShapeInfo.pageShapeHeight) * height;
      }
      for (let index = 0; index < this.videoArr.length; index++) {
        const element = this.videoArr[index];
        element.w = (element.w / this.pageShapeInfo.pageShapeWidth) * width;
        element.h = (element.h / this.pageShapeInfo.pageShapeHeight) * height;
        element.x = (element.x / this.pageShapeInfo.pageShapeWidth) * width;
        element.y = (element.y / this.pageShapeInfo.pageShapeHeight) * height;
      }
      for (let index = 0; index < this.PPTArr.length; index++) {
        const element = this.PPTArr[index];
        element.w = (element.w / this.pageShapeInfo.pageShapeWidth) * width;
        element.h = (element.h / this.pageShapeInfo.pageShapeHeight) * height;
        element.x = (element.x / this.pageShapeInfo.pageShapeWidth) * width;
        element.y = (element.y / this.pageShapeInfo.pageShapeHeight) * height;
      }
      for (let index = 0; index < this.ThreeDArr.length; index++) {
        const element = this.ThreeDArr[index];
        element.w = (element.w / this.pageShapeInfo.pageShapeWidth) * width;
        element.h = (element.h / this.pageShapeInfo.pageShapeHeight) * height;
        element.x = (element.x / this.pageShapeInfo.pageShapeWidth) * width;
        element.y = (element.y / this.pageShapeInfo.pageShapeHeight) * height;
      }
      for (let index = 0; index < this.webPageArr.length; index++) {
        const element = this.webPageArr[index];
        element.w = (element.w / this.pageShapeInfo.pageShapeWidth) * width;
        element.h = (element.h / this.pageShapeInfo.pageShapeHeight) * height;
        element.x = (element.x / this.pageShapeInfo.pageShapeWidth) * width;
        element.y = (element.y / this.pageShapeInfo.pageShapeHeight) * height;
      }
      this.pageShapeInfo.pageShapeWidth = width;
      this.pageShapeInfo.pageShapeHeight = height;
    },
    onResizeCallback(handle, x, y, width, height) {
      console.log(this.curComponent.type);
      if (this.curComponent.type == "3D") {
        this.curComponent.renderer.setSize(width, height);
      }
      if (this.curComponent.type != "SWITCH") {
        this.curComponent.w = width;
        this.curComponent.h = height;
      } else {
        this.curComponent.w = height * 2;
        this.curComponent.h = height;
      }
    },
    onDragStartWrapper(item, index) {
      return (event, ...args) => {
        this.onDragStartCallback(item, index);
        event.stopPropagation();
      };
    },
    onDragStartWrapperLogic(item, index) {
      return (event, ...args) => {
        event.stopPropagation();
      };
    },
    clickFilenput() {
      let fileInput = document.getElementById("fileInput");
      fileInput.click();
    },
    async uploadPhoto(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          this.pageBackgroundImage = res.data.data;
          console.log(this.pageBackgroundImage);
          event.target.value = "";
        }
      }
    },
    onDragCallback(x, y) {
      this.curComponent.x = x;
      this.curComponent.y = y;
    },
    onDragstop(x, y) {
      this.curComponent.x = x;
      this.curComponent.y = y;
    },
    onDragStartCallback(item, index) {
      this.curComponent = item;
      this.curComponentIndex = index;
      this.selectComponentId = item.type + index;
    },
    createButton(index) {
      this.buttonArr.push(
        JSON.parse(JSON.stringify(this.prebuildComponentArr[index]))
      );
    },
    createSwitch(index) {
      this.switchArr.push(
        JSON.parse(JSON.stringify(this.prebuildComponentArr[index]))
      );
    },
    createSlider(index) {
      this.sliderArr.push(
        JSON.parse(JSON.stringify(this.prebuildComponentArr[index]))
      );
    },
    createWebPage(index) {
      this.webPageArr.push(
        JSON.parse(JSON.stringify(this.prebuildComponentArr[index]))
      );
    },
    createVideo(index) {
      this.videoArr.push(
        JSON.parse(JSON.stringify(this.prebuildComponentArr[index]))
      );
    },
    createPPT(index) {
      this.PPTArr.push(
        JSON.parse(JSON.stringify(this.prebuildComponentArr[index]))
      );
    },
    create3D(index) {
      this.ThreeDArr.push(
        JSON.parse(JSON.stringify(this.prebuildComponentArr[index]))
      );

      this.$nextTick(() => {
        let canvas = document.getElementById(
          "renderCanvas" + (this.ThreeDArr.length - 1)
        );
        let scene = new THREE.Scene();

        // 创建相机
        let camera = new THREE.PerspectiveCamera(
          50,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        );
        camera.position.set(10, 10, 10); // 设置相机位置
        camera.lookAt(0, 0, 0); // 设置相机看向原点

        // 创建渲染器
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
        renderer.setClearColor(0x000000, 0);

        canvas.appendChild(renderer.domElement);
        // 将渲染结果添加到目标元素
        // 设置相机控件轨道控制器OrbitControls
        let controls = new OrbitControls(camera, renderer.domElement);
        // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
        controls.addEventListener("change", function () {
          renderer.render(scene, camera); //执行渲染操作
        }); //监听鼠标、键盘事件

        // 平行光
        const directionalLight = new THREE.DirectionalLight(0xffffff, 4);
        // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
        directionalLight.position.set(2, 2, 2);

        scene.add(directionalLight);
        let transformControls = new TransformControls(
          camera,
          renderer.domElement
        );

        scene.add(transformControls.getHelper());
        transformControls.addEventListener("change", function () {
          renderer.render(scene, camera); //执行渲染操作
        });
        transformControls.addEventListener(
          "dragging-changed",
          function (event) {
            controls.enabled = !event.value;
          }
        );

        function animate() {
          renderer.render(scene, camera);
          //  cube.rotateY(0.01);
          requestAnimationFrame(animate);
        }
        animate();

        // this.ThreeDArr[this.ThreeDArr.length - 1].gizmoManager = gizmoManager;
        this.ThreeDArr[this.ThreeDArr.length - 1].renderer = renderer;
        this.ThreeDArr[this.ThreeDArr.length - 1].scene = scene;
        this.ThreeDArr[this.ThreeDArr.length - 1].camera = camera;
        this.ThreeDArr[this.ThreeDArr.length - 1].controls = controls;
        this.ThreeDArr[this.ThreeDArr.length - 1].transformControls =
          transformControls;
      });
    },

    createImg(index) {
      this.imgArr.push(
        JSON.parse(JSON.stringify(this.prebuildComponentArr[index]))
      );
    },
    createTextView(index) {
      this.inputArr.push(
        JSON.parse(JSON.stringify(this.prebuildComponentArr[index]))
      );
    },
    getRefLineParams(params) {
      const { vLine, hLine } = params;
      this.vLine = vLine;
      this.hLine = hLine;
    },
    async connectWs() {
      var resOfGetRandomId = await request({
        url: "/language/api/getRandomId",
        method: "GET",
      });
      if (resOfGetRandomId.data.status == 200) {
        this.tokenId = resOfGetRandomId.data.data;
        this.initWs(resOfGetRandomId.data.data);
      }
    },
    initWs(wsId) {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        let wsUrl = window.location.origin.replace("http://", "");
        // 实例化socket 111是固定的用户id,正式环境直接获取当前登录用户id
        // this.socket = new WebSocket(
        //   "ws:" + "192.168.0.62:8094" + "//wsServer/" + wsId
        // );
        this.socket = new WebSocket("ws:" + wsUrl + "//wsServer/" + wsId);
        this.global.setWs(this.socket);
        let that = this;
        // 监听socket连接
        this.socket.onopen = () => {
          console.log("socket连接成功");
          that.socket.send("connect#" + that.pageName + "#" + that.tokenId);
        };
        // 监听socket错误信息
        this.socket.onerror = () => {
          console.error("连接错误");
          const connectTimeout = setTimeout(() => {
            this.initWs(wsId);
            clearTimeout(connectTimeout);
          }, 10000);
        };
        //监听socket消息
        this.socket.onmessage = (msg) => {
          let jsonObject = JSON.parse(msg.data);
          if (jsonObject.data.type == "refresh") {
            that
              .$confirm("有其他用户更新该页面, 是否覆盖?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
              .then(() => {
                that.cleanPage();
                that.getPageInfoByPageName();
                that.getAllComponent();
              })
              .catch(() => {
                that.$message({
                  type: "info",
                  message: "已取消删除",
                });
              });
          } else {
            console.log(jsonObject);
          }
        };
        // 监听socket关闭信息
        this.socket.onclose = (e) => {
          console.log("socket已经关闭");
        };
      }
    },
  },
};
</script>

<style scoped>
.logicInput {
  width: 200px;
  height: 30px;
  display: flex;
  align-items: center;
  margin-left: 5px;
  background: #2558b5;
}
.logicInput input {
  width: 100%;
  margin: 0 5px;
  background: #17479c;
}
.logicLabel {
  width: 80px;
  height: 30px;
  background: #2558b5;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 0 5px;
}
.my-editor {
  background: #f9fafa;
  color: #000;

  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 16px;
  line-height: 1.5;
  padding: 5px;
  font-weight: 500;
}

.my-editor /deep/ .prism-editor__textarea::selection {
  background-color: #cce2ff !important;
  color: #000 !important;
  user-select: none;
}

.my-editor /deep/ .prism-editor__textarea:focus {
  border: 0px solid #007bff;
  outline: none;
}

.my-editor /deep/ .prism-editor__line-numbers {
  padding-right: 10px;
}
/deep/.el-collapse {
  background-color: transparent !important;
}
/deep/.el-collapse-item__wrap {
  border: none;
  background-color: transparent !important;
}
/deep/ .el-collapse-item__header {
  color: #fff;
  background-color: transparent !important;
}
/deep/ .el-collapse-item__content {
  color: #fff;
  background-color: transparent !important;
}

.selectingComponent {
  display: inline-block;
  background: #103985;
  color: white;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.selectedComponentClass {
  display: inline-block;
  background: linear-gradient(to right, #6dabf9, #4298fe, #6dabf9);
  color: white;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.selectingComponent:hover {
  display: inline-block;
  background-color: #409eff;
}

#showVDR::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  border: solid 2px #0066a8;
  border-radius: 0px;
  z-index: 0;
  pointer-events: none;
}

.my-handle-class {
  /* 设置背景颜色 */
  width: 50px !important; /* 设置宽度 */
  height: 50px !important; /* 设置高度 */

  cursor: pointer; /* 设置鼠标悬停时的光标样式 */
  position: absolute;
  top: -50px !important;
  background: url("~@/assets/top.png") no-repeat center center / cover;
  left: 0 !important;
  z-index: 1003;
}
input {
  background: transparent;
  border: 0;
  border-bottom: solid white 1px;
}
.btnClass {
  background-size: cover;
}

.transparent-input .input__inner {
  background-color: transparent !important; /* 使用 !important 可以确保样式优先级更高 */
  border: 1px solid #ccc; /* 你可以根据需要调整边框样式 */
  color: #000; /* 确保文本颜色在透明背景下可见 */
}

/* 如果需要，你还可以添加额外的样式来确保在焦点时输入框仍然可见 */
.transparent-input .input__inner:focus {
  box-shadow: none; /* 移除焦点时的阴影 */
  border-color: #409eff; /* Element UI的默认蓝色边框，或者你可以自定义颜色 */
}
</style>
